/*!
 * v1.1.0

 * Copyright 2015 UnitedStack, Inc
 * LeeYao <yaoli@unitedstack.com>
 * Qijiang <jiangqi@unitedstack.com>
 */


/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

.clearfix {
    *zoom: 1
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0
}

.clearfix:after {
    clear: both
}

body {
    margin: 0;
    font-family: Arial, "Microsoft YaHei", "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #252f3d;
    background-color: #fff
}

a {
    color: #00afc8;
    text-decoration: none
}

a:hover,
a:focus,
a:active {
    color: #00a5c1;
    text-decoration: none
}

a:focus,
a:hover,
a:active {
    outline: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block
}

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

audio:not([controls]) {
    display: none
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    max-width: 100%;
    width: auto\9;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic
}

button,
input,
select,
textarea {
    margin: 0;
    font-size: 100%;
    vertical-align: middle
}

button,
input {
    *overflow: visible;
    line-height: normal
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
    cursor: pointer
}

input[type="search"] {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: textfield
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none
}

textarea {
    overflow: auto;
    vertical-align: top
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 8.5px 0;
    font-family: inherit;
    font-weight: bold;
    line-height: 17px;
    color: inherit;
    text-rendering: optimizelegibility
}

h1,
h2,
h3 {
    line-height: 34px
}

h1 {
    font-size: 35.75px
}

h2 {
    font-size: 29.25px
}

h3 {
    font-size: 22.75px
}

h4 {
    font-size: 16.25px
}

h5 {
    font-size: 13px
}

h6 {
    font-size: 11.049999999999999px
}

form {
    margin: 0
}

label {
    display: block;
    margin-bottom: 0
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    display: inline-block;
    height: 32px;
    padding: 4px 10px;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 22px;
    color: #252f3d;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    vertical-align: middle;
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

input,
textarea,
.uneditable-input {
    width: 206px
}

textarea {
    height: auto
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    background-color: #fff;
    border: 1px solid #e2e7ea
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: #00afc8;
    outline: 0;
    outline: thin dotted \9
}

input[type="radio"],
input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
    width: auto
}

select,
input[type="file"] {
    height: 27px;
    line-height: 27px
}

select {
    width: 220px;
    border: 1px solid #ccc;
    background-color: #fff
}

select[multiple],
select[size] {
    height: auto
}

select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline: 0
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #999
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #999
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
    background-color: #f8fafc;
    color: #b8c5ce;
    border-color: #e7ebee!important;
    cursor: not-allowed
}

input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
    background-color: transparent
}

.pull-right {
    float: right
}

.pull-left {
    float: left
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.invisible {
    visibility: hidden
}

.affix {
    position: fixed
}

html,
body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    overflow: hidden
}

ul,
li {
    margin: 0px;
    padding: 0px;
    list-style: none
}

.moveout {
    display: none!important
}

.main {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%
}

.main_content {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    position: relative
}

.main_content .panel_center_wrapper {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px
}

.main_content .panel_center_wrapper.listView {
    left: 0
}

.appArea {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative
}

.appmodal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: none;
    z-index: 999;
    -webkit-animation-duration: .15s;
    -moz-animation-duration: .15s;
    animation-duration: .15s
}

.appmodal.fullScreen {
    top: 0px
}

.appmodal>div {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    -moz-transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    -webkit-transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    -ms-transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    -o-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    transition: all .15s ease-out;
    -webkit-transition: all .15s ease-out
}

.appmodal>div.scaleIn {
    transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    -moz-transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    -webkit-transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    -ms-transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    opacity: 1
}

.appmodal>div.scaleOut {
    transform: translate(-50%, -50%) scale(.8, .8) translateZ(0);
    -moz-transform: translate(-50%, -50%) scale(.8, .8) translateZ(0);
    -webkit-transform: translate(-50%, -50%) scale(.8, .8) translateZ(0);
    -ms-transform: translate(-50%, -50%) scale(.8, .8) translateZ(0);
    opacity: 0
}

.appmodal .closeModal {
    display: block;
    position: absolute;
    right: 20px;
    top: 18px;
    width: 13px;
    height: 13px;
    background: url(/static/public/img/icon-close@x2.png) 0 0 no-repeat;
    background-size: 13px 116px
}

.appmodal .closeModal:hover {
    background-position: 0 -14px
}

.appmodal .closeModal:active {
    background-position: 0 -28px
}

[wp-type="app"] {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #fff;
    left: 0;
    top: 0
}

[wp-type="app"] .uosPage {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: #fff;
    padding: 10px 20px 0 20px;
    display: none
}

[wp-type="app"] .uosPage.selected {
    display: block;
    overflow: auto
}

[wp-type="app"] a[wp-type="droptdown"],
[wp-type="app"] a[wp-type="button"] {
    font-size: 13px;
    color: #fff;
    background-color: #00afc8;
    height: 34px;
    line-height: 34px;
    display: inline-block;
    padding: 0 10px;
    margin-right: 10px
}

[wp-type="app"] a[wp-type="droptdown"]:hover,
[wp-type="app"] a[wp-type="button"]:hover {
    text-decoration: none
}

[wp-type="app"] a[wp-type="button2"] {
    font-size: 14px;
    line-height: 28px;
    display: inline-block;
    height: 28px;
    color: #00afc8
}

[wp-type="app"] .dataView {
    background-color: #fff
}

.tabs {
    height: 35px;
    position: relative;
    margin-top: 10px
}

.tabs .tab {
    color: #738293;
    padding: 6px 12px 4px;
    height: 35px;
    line-height: 25px;
    border-right: 2px solid #fff;
    overflow: hidden;
    font-size: 13px;
    display: block;
    float: left;
    cursor: pointer;
    position: relative
}

.tabs .tab:hover {
    background-color: #b9f1f9;
    text-decoration: none
}

.tabs .tab.selected {
    background-color: #fff;
    cursor: default
}

.tabs .tab.selected:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #00afc8
}

.tabs .ph {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    border-color: #ffb400 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 6px 6px 0 6px;
    width: 0;
    height: 0
}

.selectWrapper {
    display: inline-block;
    position: relative
}

.selectWrapper span {
    display: inline-block
}

.selectWrapper select.styleDone {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block!important;
    opacity: 0;
    width: 30px
}

.tabPanels {
    background-color: #fff;
    overflow: hidden
}

.vmModal {
    width: 814px;
    height: 540px;
    background-color: #fff!important;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 2px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.vmModal h1 {
    font-size: 18px;
    font-weight: normal;
    padding: 0px;
    padding-left: 48px;
    margin: 0px;
    height: 47px;
    line-height: 47px;
    background-color: #ecf0f2
}

.vmModal label {
    display: inline-block;
    width: 65px;
    font-size: 12px;
    color: #252f3d
}

.vmModal input:text {
    background-color: #fafafa;
    border: 1px solid #e7e7e7
}

.vmModal .tab {
    border-top-color: #f0f0f0;
    background-color: #f0f0f0;
    padding: 0 30px;
    margin-right: 0;
    display: block;
    float: left;
    color: #6e6e6e
}

.vmModal .tab.selected {
    background-color: #d4d4d3;
    color: #232323
}

.vmModal .panel {
    padding: 25px 48px 0px;
    font-size: 12px;
    height: 327px;
    background-color: #fff
}

.vmModal .panel .row {
    margin-bottom: 11px;
    line-height: 32px
}

.vmModal .panel .row.rowNumber {
    text-align: right;
    width: 312px;
    padding: 0;
    margin: 0
}

.vmModal .panel .row.rowNumber input {
    width: 72px
}

.vmModal .panel .row.row.rowCheckbox input[type="checkbox"] {
    display: inline-block;
    margin-left: 0
}

.vmModal .panel .row.row.rowCheckbox>label {
    position: relative;
    top: 3px;
    left: 0;
    display: inline-block;
    padding-top: 2px;
    width: auto
}

.vmModal .panel .row.row.rowCheckbox>label.disabled {
    opacity: .5;
    cursor: not-allowed
}

.vmModal .panel .row a {
    color: #40c7dd
}

.vmModal .panel .row .error {
    border: 1px solid #e05c69
}

.vmModal .buttonBar {
    height: 49px;
    border-top: 1px solid #e2e7ea
}

.vmModal .buttonBar a {
    margin-right: 10px
}

.vmModal .buttonBar .back {
    margin-right: 476px!important;
    background-color: #dfe4e6;
    color: #5b6775;
    text-align: center
}

.vmModal .buttonBar .back:hover {
    background-color: #d4dadc
}

.vmModal .buttonBar .back:active {
    background-color: #c7cfd2
}

.vmModal .buttonBar .back.auto {
    width: auto
}

.vmModal .buttonBar .update {
    width: 100px;
    background-color: #00afc8;
    text-align: center
}

.vmModal .buttonBar .update:hover {
    background-color: #00a5bd
}

.vmModal .buttonBar .update:active {
    background-color: #009bb1
}

.vmModal .buttonBar .update.auto {
    width: auto
}

.vmModal .buttonBar .cancel {
    color: #5b6775;
    background-color: #dfe4e6
}

.vmModal .buttonBar .cancel:hover {
    background-color: #d4dadc
}

.vmModal .buttonBar .cancel:active {
    background-color: #c7cfd2
}

.promptDialog {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 0;
    width: 550px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.promptDialog .header {
    margin: 0;
    padding-left: 48px;
    height: 47px;
    line-height: 47px;
    font-size: 18px;
    font-weight: normal;
    background-color: #ecf0f2
}

.promptDialog .msg {
    word-break: break-all;
    padding: 20px 48px 6px 48px;
    line-height: 20px
}

.promptDialog .msg>span {
    margin-top: 10px;
    display: block;
    padding: 5px 12px;
    font-size: 12px;
    background-color: #fff7ea;
    border: 1px solid #ffcd7e;
    line-height: 20px
}

.promptDialog .msg>span strong {
    color: #ffac2a;
    font-weight: normal
}

.promptDialog a.showMore {
    display: inline-block;
    background: url(/static/public/img/icon_expand.png) 0 0 no-repeat;
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
    margin-right: 10px
}

.promptDialog a.showMore.showLess {
    background-image: url(/static/public/img/icon_collapse.png)
}

.promptDialog .detail {
    margin-top: 10px;
    display: none
}

.promptDialog.info .buttonArea a.buttonYes {
    background-color: #00afc8
}

.promptDialog.info .buttonArea a.buttonYes:hover {
    background-color: #00a5bd
}

.promptDialog .list {
    line-height: 20px;
    margin: 10px 48px 20px;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
    background-color: #f2f6f9;
    padding: 20px 0
}

.promptDialog .list>span {
    display: block;
    float: left;
    width: 50%
}

.promptDialog .list>span i {
    margin-left: 20px
}

.promptDialog .buttonArea {
    padding-right: 40px;
    height: 50px;
    border-top: 1px solid #e2e7ea;
    text-align: right;
    background-color: #fff
}

.promptDialog .buttonArea a {
    margin-top: 9px;
    text-align: center
}

.promptDialog .buttonArea a.buttonOk {
    display: inline-block;
    margin: 9px 48px 0 0;
    padding: 0 12px;
    min-width: 50px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background-color: #00afc8
}

.promptDialog .buttonArea a.buttonOk:hover {
    background-color: #00a5bd
}

.promptDialog .buttonArea a.buttonOk:active {
    background-color: #009bb1
}

.promptDialog .buttonArea a.buttonYes,
.promptDialog .buttonArea a.buttonNo {
    display: inline-block;
    margin: 9px 10px 0 0;
    padding: 0 12px;
    min-width: 50px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background-color: #e05c69
}

.promptDialog .buttonArea a.buttonYes:hover,
.promptDialog .buttonArea a.buttonNo:hover {
    background-color: #d6505c
}

.promptDialog .buttonArea a.buttonYes:active,
.promptDialog .buttonArea a.buttonNo:active {
    background-color: #cd4855
}

.promptDialog .buttonArea a.buttonYes {
    margin-right: 10px
}

.promptDialog .buttonArea a.buttonNo {
    color: #5b6775;
    background-color: #dfe4e6
}

.promptDialog .buttonArea a.buttonNo:hover {
    background-color: #d4dadc
}

.promptDialog .buttonArea a.buttonNo:active {
    background-color: #c7cfd2
}

.promptDialog.confirmDialog .buttonArea a.buttonYes {
    background-color: #00afc8
}

.out {
    display: none
}

@-webkit-keyframes fadeIn {
    0% {
        background-color: rgba(0, 0, 0, 0)
    }
    100% {
        background-color: rgba(0, 0, 0, 0.55)
    }
}

@-moz-keyframes fadeIn {
    0% {
        background-color: rgba(0, 0, 0, 0)
    }
    100% {
        background-color: rgba(0, 0, 0, 0.55)
    }
}

@-o-keyframes fadeIn {
    0% {
        background-color: rgba(0, 0, 0, 0)
    }
    100% {
        background-color: rgba(0, 0, 0, 0.55)
    }
}

@keyframes fadeIn {
    0% {
        background-color: rgba(0, 0, 0, 0)
    }
    100% {
        background-color: rgba(0, 0, 0, 0.55)
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeOut {
    0% {
        background-color: rgba(0, 0, 0, 0.55)
    }
    100% {
        background-color: rgba(0, 0, 0, 0)
    }
}

@-moz-keyframes fadeOut {
    0% {
        background-color: rgba(0, 0, 0, 0.55)
    }
    100% {
        background-color: rgba(0, 0, 0, 0)
    }
}

@-o-keyframes fadeOut {
    0% {
        background-color: rgba(0, 0, 0, 0.55)
    }
    100% {
        background-color: rgba(0, 0, 0, 0)
    }
}

@keyframes fadeOut {
    0% {
        background-color: rgba(0, 0, 0, 0.55)
    }
    100% {
        background-color: rgba(0, 0, 0, 0)
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -o-animation-name: fadeOut;
    animation-name: fadeOut
}

input:not([type]):hover,
input[type="text"]:hover,
textarea:hover,
input:not([type]):focus,
input[type="text"]:focus,
textarea:focus {
    outline-width: 0px;
    border: 1px #00afc8 solid
}

.msgPanel {
    display: none;
    width: 240px;
    right: 0;
    top: 50px;
    z-index: 1000;
    position: fixed;
    color: #000;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.msgPanel li {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    padding: 5px 25px;
    list-style: none;
    border: 1px solid #ffc438;
    border-right: none;
    border-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 14px 20px;
    background: #fff9e0;
    position: relative;
    margin-top: 6px
}

.msgPanel li a {
    background: url(/static/public/img/msg-icon-add-remove.png) 0 0 no-repeat;
    width: 16px;
    height: 16px;
    float: right;
    display: block;
    background-size: 64px 16px;
    margin-left: 22px
}

.msgPanel li a:hover {
    background-position: 100% 0
}

.msgPanel li:not(.error) {
    background-color: rgba(215, 250, 255, 0.95);
    border: 1px solid #64d1e1
}

.msgPanel li:not(.error) i {
    display: inline-block;
    margin-right: 5px
}

.msgPanel li:not(.error) i.loading {
    position: relative;
    width: 20px;
    height: 20px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") center center no-repeat;
    vertical-align: middle;
    border: none
}

.msgPanel li:not(.error) i.loading:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

.msgPanel li:not(.error) i.done {
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 0 no-repeat;
    background-size: 15px 90px;
    position: relative;
    top: 3px
}

.ajax-disabled {
    cursor: default!important;
    background-color: #ddd !important;
    color: #c0c0c0 !important
}

.chart {
    margin-bottom: 20px
}

.chart:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    opacity: 0.01;
    z-index: 2
}

.tipsHover {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    max-width: 150px;
    background-color: #f5fdfe;
    border: 1px solid #5cd0e0;
    color: #444;
    border-radius: 5px;
    padding: 10px;
    line-height: 15px;
    transform: translate(-50%, -100%) scale(1, 1);
    -moz-transform: translate(-50%, -100%) scale(1, 1);
    -webkit-transform: translate(-50%, -100%) scale(1, 1);
    -ms-transform: translate(-50%, -100%) scale(1, 1);
    margin-left: 10px;
    margin-top: -5px;
    z-index: 11
}

.tipsHover:before {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 7px;
    transform: translate(-50%, 0) scale(1, 1);
    -moz-transform: translate(-50%, 0) scale(1, 1);
    -webkit-transform: translate(-50%, 0) scale(1, 1);
    -ms-transform: translate(-50%, 0) scale(1, 1);
    background: url("/static/modules/apps/instance/i/icon-tooltips.png") 0 0 no-repeat;
    background-size: contain
}

.tipsHover label {
    float: left;
    clear: left;
    font-weight: bold
}

.tipsHover .content {
    float: left;
    margin-left: 10px
}

.hide {
    display: none!important
}

.normalrow {
    position: relative;
    overflow: visible;
    margin-left: 70px;
    margin-bottom: 10px
}

.normalrow>label {
    position: absolute;
    display: block;
    left: -95px;
    width: 90px;
    top: 0;
    bottom: 0;
    text-align: right
}

.normalrow>label strong {
    font-weight: normal;
    color: red;
    font-size: 14px;
    position: relative;
    top: 3px;
    left: -3px
}

.normalrow>input[type="text"],
.normalrow>input[type="password"],
.normalrow>select.select,
.normalrow textarea {
    display: block;
    width: 100%
}

.normalrow>select.select.groupselect2 {
    width: 280px;
    display: inline-block
}

.normalrow>a.add {
    display: inline-block;
    margin-left: 10px;
    color: #626f7e;
    padding: 1px 10px;
    background-color: #ecf0f2;
    border-radius: 2px
}

.normalrow>a.add:hover {
    background-color: #d4dadc
}

.normalrow>a.add:active {
    background-color: #c7cfd2
}

.normalrow .select {
    line-height: 27px
}

.normalrow .emptyTextLabel {
    color: #a8b3be;
    display: inline-block;
    line-height: 27px
}

.normalrow textarea {
    height: 100px;
    font-family: Arial, Helvetica;
    resize: none
}

.normalrow>input[type="checkbox"] {
    margin: 5px 0 0 5px;
    display: block
}

.normalrow .navigator {
    overflow: hidden
}

.normalrow .navigator>li {
    float: left;
    width: 122px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    padding: 0 10px;
    border: 1px solid transparent;
    margin-right: 13px;
    border-radius: 2px;
    background-color: #ecf0f2
}

.normalrow .navigator>li:hover {
    background-color: #b9f1f9;
    border-color: #b9f1f9
}

.normalrow .navigator>li.selected {
    border-color: #5cd0e0;
    background-color: #5cd0e0
}

.normalrow .navigator>li.selected a {
    color: #252f3d
}

.normalrow .navigator>li a {
    display: block;
    color: #5b6775
}

.normalrow.rowTabs {
    height: 36px;
    line-height: 36px
}

.normalrow.rowTabs .btn {
    display: inline-block;
    min-width: 150px;
    border: 1px solid transparent;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 10px;
    font-size: 12px;
    height: 34px;
    line-height: 34px;
    border-radius: 2px;
    color: #5b6775;
    background-color: #ecf0f2;
    border-color: #ecf0f2;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    margin-right: 10px
}

.normalrow.rowTabs .btn i {
    margin-right: 10px
}

.normalrow.rowTabs .btn:hover {
    color: #5b6775;
    background-color: #b9f1f9;
    border-color: #b9f1f9
}

.normalrow.rowTabs .btn.selected {
    color: #252f3d;
    background-color: #5cd0e0;
    border-color: #5cd0e0
}

.normalrow.linkRow {
    clear: both;
    margin-bottom: 0
}

.normalrow.rowCustom {
    min-height: 32px;
    height: auto
}

.normalrow.rowCustom div.templateList a {
    width: 97px;
    text-align: center;
    float: left;
    margin-right: 10px;
    padding: 4px 12px
}

.normalrow.rowCustom div.templateList a:nth-child(3n) {
    margin-right: 0
}

.normalrow.rowCustom div.templateList a.selected {
    background-color: #5cd0e0;
    color: #000
}

.normalrow.rowCustom>div input[type="radio"] {
    margin: 7px 5px 0 0;
    display: block;
    float: left
}

.normalrow.rowCustom>div .select {
    float: left;
    display: block
}

.normalrow.rowCustom>div a {
    background-color: #ecf0f2;
    color: #566775;
    line-height: 24px;
    padding: 4px 36px 4px 12px;
    border-radius: 2px;
    display: block;
    margin-bottom: 8px
}

.normalrow.rowCustom>div a:hover {
    background-color: #b9f1f9
}

.normalrow.rowCustom>div a:active {
    background-color: #5cd0e0
}

.normalrow.rowCustom>div a .rightPart {
    float: right
}

.normalrow.rowCustom>div .selected {
    background-color: transparent
}

.normalrow.rowCustom>div .selected a {
    position: relative;
    color: #252f3d;
    background-color: #5cd0e0
}

.normalrow.rowCustom>div .selected a:before {
    position: absolute;
    background: url(/static/public/img/icon-checkmark.png) 0 0 no-repeat;
    background-size: 14px 14px;
    display: block;
    width: 14px;
    height: 14px;
    content: "";
    top: 9px;
    right: 9px
}

.normalrow.rowCustom>div .selected.attached a {
    background-color: #1eb9a5
}

.normalrow.rowCustom>div .selected.errors a {
    background-color: #ff8a8a
}

.normalrow.rowCustom>div .radioBox {
    clear: both;
    position: relative;
    top: -5px
}

.normalrow.rowCustom>div .radioBox a {
    background-color: transparent;
    color: #00afc8;
    display: inline;
    float: right;
    padding-right: 0;
    margin: 0
}

.normalrow.rowCustom>div .radioBox input[type="radio"] {
    float: left;
    margin-top: 6px;
    position: relative;
    top: 6px
}

.normalrow.rowCustom>div .radioBox>div {
    text-align: left;
    width: auto;
    float: left
}

.normalrow.rowCustom>div .radioBox>div input.number[type="text"] {
    min-width: 40px;
    margin: 3px;
    text-align: center;
    -webkit-appearance: none;
    appearance: none
}

.normalrow.rowCustom>div .radioBox>div input.number[type="text"].error {
    background-position: 0 bottom
}

.normalrow.rowCustom>div .radioBox>div .inputWrapper {
    position: relative
}

.normalrow.rowCustom>div .radioBox>div .inputWrapper .tp {
    position: absolute;
    bottom: 41px;
    max-width: 300px;
    min-width: 50px;
    text-align: center;
    background-color: #f5fdfe;
    border: 1px solid #5cd0e0;
    border-radius: 5px;
    padding: 10px;
    line-height: 15px;
    left: 50%;
    transform: translate(-50%, 0) scale(1, 1);
    -moz-transform: translate(-50%, 0) scale(1, 1);
    -webkit-transform: translate(-50%, 0) scale(1, 1);
    -ms-transform: translate(-50%, 0) scale(1, 1)
}

.normalrow.rowCustom>div .radioBox>div .inputWrapper .tp:before {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 7px;
    transform: translate(-50%, 0) scale(1, 1);
    -moz-transform: translate(-50%, 0) scale(1, 1);
    -webkit-transform: translate(-50%, 0) scale(1, 1);
    -ms-transform: translate(-50%, 0) scale(1, 1);
    background: url("/static/modules/apps/instance/i/icon-tooltips.png") 0 0 no-repeat;
    background-size: contain
}

.normalrow.rowCustom>div.loading {
    display: inline-block;
    margin-right: 5px;
    height: 24px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 2px center no-repeat;
    position: relative;
    top: -2px;
    vertical-align: middle;
    border: none;
    padding-left: 30px
}

.normalrow.rowCustom>div.loading:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 24px;
    height: 24px;
    left: 0;
    top: 0;
    position: absolute;
    background-size: contain;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.normalrow.rowCustom>div.loading.hide {
    display: none
}

.normalrow.rowCustom.rowSlide {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.normalrow.rowCustom .dragarea {
    background-color: #f0f0f0;
    height: 15px;
    width: 306px;
    margin-top: 5px;
    position: relative;
    float: left
}

.normalrow.rowCustom .dragarea.hasInit {
    width: 283px
}

.normalrow.rowCustom .dragarea .thumbnail {
    width: 1px;
    height: 11px;
    position: absolute;
    border: 5px solid #00afc8;
    border-radius: 1px;
    top: -3px;
    cursor: pointer;
    background-color: #fff
}

.normalrow.rowCustom .dragarea .initarea {
    background-color: #00afc8;
    height: 15px;
    width: 0;
    float: left
}

.normalrow.rowCustom .dragarea .selectedArea {
    background-color: #9de6f1;
    height: 15px;
    float: left;
    position: absolute;
    left: 0
}

.normalrow.rowCustom .dragarea.disabled .thumbnail {
    opacity: 0.3;
    cursor: default
}

.normalrow.rowCustom .dragarea.disabled .initarea {
    background-color: transparent
}

.normalrow.rowCustom .inputarea {
    float: right;
    position: relative
}

.normalrow.rowCustom .inputarea input {
    width: 67px;
    height: 28px;
    padding-left: 5px;
    padding-right: 20px;
    -moz-box-sizing: border-box
}

.normalrow.rowCustom .inputarea .unit {
    position: absolute;
    top: 1px;
    right: 5px
}

.normalrow.rowCustom .inputarea .initvalue {
    position: absolute;
    right: 66px
}

.normalrow.rowCustom .tips {
    clear: left;
    padding-top: 10px;
    text-align: right;
    width: 306px
}

.normalrow.rowCustom .tips.hasInit {
    width: 283px
}

.normalrow.rowCustom .warning {
    font-size: 12px;
    color: #e54151;
    position: relative;
    top: -22px
}

.normalrow.rowCustom .radioBox input.number {
    text-align: center!important;
    width: 25px;
    display: inline;
    padding: 0
}

.normalrow.rowCustom .radioBox .hide {
    display: none
}

.normalrow.rowCustom .flag>div {
    overflow: hidden
}

.normalrow.rowCustom .flag>div.iops {
    width: 400px
}

.normalrow.rowCustom .flag>div .label {
    font-size: 12px;
    color: #738293
}

.normalrow.rowCustom .flag>div .label>span {
    font-size: 12px;
    color: #a8b3be
}

.normalrow.rowCustom .flag>div .label>span:first-child {
    display: inline-block;
    margin-left: 12px
}

.normalrow.rowCustom .flag>div .metric {
    background-color: #e2e7ea;
    height: 15px;
    width: 306px;
    float: left;
    border-radius: 2px;
    margin-right: 8px
}

.normalrow.rowCustom .flag>div .metric .metricSelected {
    background-color: #9de6f1;
    height: 15px;
    max-width: 306px;
    border-radius: 2px
}

.normalrow.rowCustom .flag>div .valueField {
    color: #252f3d;
    font-size: 12px;
    float: left;
    line-height: 18px
}

.normalrow.rowCustom .flag>div.single .label {
    color: #a8b3be
}

.normalrow.rowCustom .flag>div.single .label strong {
    color: #738293
}

.normalrow.rowCustom .custom_filed {
    overflow: hidden
}

.normalrow.textRow {
    height: auto;
    line-height: 20px;
    min-height: 20px
}

.normalrow .tipsLink {
    display: inline-block;
    margin-left: 5px;
    position: relative;
    overflow: visible
}

.normalrow .tipsLink label {
    color: white;
    background-color: #dae4e5;
    border-radius: 50%;
    display: inline-block;
    font-weight: bold;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center
}

.normalrow .tipsLink span {
    display: none!important
}

.normalrow.labelRow {
    margin-left: 0;
    line-height: 18px;
    margin-bottom: 10px
}

.normalrow.labelRow input[type="checkbox"] {
    display: inline-block;
    margin-left: 0;
    margin-right: 5px;
    margin-top: 0
}

.normalrow.labelRow label.checkLabel {
    position: static!important;
    display: inline!important
}

.normalrow.labelRow.longLabelRow {
    background-color: #e5f7fa;
    border: 1px solid #51c4d4;
    padding: 7px 12px;
    line-height: 20px;
    font-size: 12px;
    color: #252f3d;
    border-radius: 2px
}

.normalrow.tipsRow {
    margin-left: 0;
    padding: 5px 12px;
    font-size: 12px;
    background-color: #fff7ea;
    border: 1px solid #ffcd7e;
    line-height: 20px;
    clear: both
}

.normalrow.tipsRow strong {
    color: #ffac2a;
    font-weight: normal
}

.normalrow.tipsRow a {
    color: #00afc8
}

.normalrow.billInfo {
    float: right;
    clear: both;
    font-size: 12px
}

.normalrow.billInfo .chargeValue {
    font-size: 18px;
    color: #f78913
}

.normalrow.billInfo .chargeMonth {
    margin-left: 15px;
    display: inline-block;
    font-size: 14px;
    color: #a8b3be
}

.normalrow.errorTips {
    border-radius: 2px;
    padding: 7px 12px;
    line-height: 20px;
    font-size: 12px;
    border: 1px solid #e05c69;
    background-color: #fff4f4;
    clear: both;
    margin-left: 0
}

.normalrow .tips {
    line-height: 18px;
    position: relative;
    top: 2px;
    color: #a8b3be
}

.normalrow .tips.error {
    border: none;
    color: #e05c69
}

.normalrow .tips strong {
    color: #ffac2a;
    font-weight: normal
}

.removerRow.rowCustom>div a:hover {
    background-color: #ff8a8a
}

.removerRow.rowCustom>div .selected a {
    background-color: #ff8a8a
}

.createbutton {
    padding-left: 28px;
    position: relative;
    padding-left: 32px;
    border-radius: 2px;
    background-color: #1eb9a5
}

.createbutton:after {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-buttons-v2.png") 1px 1px no-repeat;
    background-size: 555px 40px;
    width: 16px;
    height: 20px;
    position: absolute;
    top: 7px;
    left: 10px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .createbutton:after {
        background-image: url("/static/modules/apps/instance/i/icon-buttons-v2@2x.png")
    }
}

.createbutton:hover {
    background-color: #00a5bd
}

.createbutton:active {
    background-color: #009bb1
}

.createbutton:after {
    background-position: 1px 1px
}

.createbutton:hover {
    background-color: #09b29c
}

.createbutton:active {
    background-color: #00a993
}

.toggle {
    background-color: #bdc3c7;
    height: 21px;
    width: 60px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
    padding-left: 26px;
    text-transform: uppercase;
    line-height: 15px;
    padding-top: 3px;
    padding-bottom: 3px
}

.toggle:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    top: 3px;
    left: 5px;
    background-color: #7f8c8d;
    border-radius: 15px
}

.toggle.on {
    padding-left: 10px;
    padding-right: 26px;
    background-color: #c3ebf0;
    color: #00afc8
}

.toggle.on:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    top: 3px;
    right: 5px;
    left: auto;
    background-color: #00afc8;
    border-radius: 15px
}

@font-face {
    font-family: 'placeboIcon';
    src: url('/static/public/css/utils/fonts/placeboIcon/placeboIcon.eot');
    src: url('/static/public/css/utils/fonts/placeboIcon/placeboIcon.eot?#iefix') format('embedded-opentype'), url('/static/public/css/utils/fonts/placeboIcon/placeboIcon.woff') format('woff'), url('/static/public/css/utils/fonts/placeboIcon/placeboIcon.ttf') format('truetype'), url('/static/public/css/utils/fonts/placeboIcon/placeboIcon.svg#placeboIcon') format('svg');
    font-weight: normal;
    font-style: normal
}

[class^="icon-"],
[class*=" icon-"],
.cssstatus>span {
    font-family: 'placeboIcon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-checkmark:before {
    content: "\e600"
}

.icon-delete:before {
    content: "\e60b"
}

.icon-justice:before {
    content: "\e605"
}

.icon-vnc:before {
    content: "\e602"
}

.icon-terminate:before {
    content: "\e603"
}

.icon-setting:before {
    content: "\e604"
}

.icon-resume:before {
    content: "\e606"
}

.icon-restart:before {
    content: "\e607"
}

.icon-poweroff_status:before {
    content: "\e608"
}

.icon-poweroff:before {
    content: "\e609"
}

.icon-pause:before {
    content: "\e60d"
}

.icon-important:before {
    content: "\e60e"
}

.icon-image:before {
    content: "\e60f"
}

.icon-edit_status:before {
    content: "\e610"
}

.icon-active:before {
    content: "\e613"
}

.icon-arrow-down:before {
    content: "\e60c"
}

.icon-arrow-up:before {
    content: "\e614"
}

.icon-arrow-left:before {
    content: "\e615"
}

.icon-arrow-right:before {
    content: "\e616"
}

.select {
    height: 32px;
    line-height: 32px
}

input[type="checkbox"] {
    width: 14px;
    height: 14px
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="radio"],
    input[type="checkbox"],
    .select {
        background: url(/static/public/css/utils/images/xbox.png) no-repeat -60px 0
    }
    input[type="radio"] {
        -webkit-appearance: none;
        appearance: none;
        *background: none;
        width: 16px;
        height: 16px
    }
    input[type="radio"]:hover {
        background-position: -80px 0
    }
    input[type="radio"]:checked {
        background-position: -100px 0
    }
    input[type="radio"]:disabled {
        background: url(/static/public/css/utils/images/xbox_disabled.png) no-repeat 0 0;
        cursor: not-allowed
    }
    input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        background-position: 0 0;
        *background: none;
        width: 16px;
        height: 16px
    }
    input[type="checkbox"]:hover {
        background-position: -20px 0
    }
    input[type="checkbox"]:checked {
        background-position: -40px 0
    }
    .select {
        -webkit-appearance: none;
        appearance: none;
        background-position: right -69px;
        *background: none;
        width: 280px;
        height: 32px;
        line-height: 32px;
        padding: 0 25px 0 10px;
        border: 1px solid #e2e7ea
    }
    .select:hover {
        background-position: right -31px;
        border: 1px solid #00afc8
    }
    .select:focus {
        border: 1px solid #00afc8;
        outline: 0px
    }
    .select:disabled {
        background: url(/static/public/css/utils/images/xbox_disabled.png) no-repeat right -31px;
        background-color: #f8fafc;
        color: #b8c5ce;
        border-color: #e7ebee!important;
        cursor: not-allowed
    }
}

.qiniu #header .navbar .logo a {
    background-image: url(/static/public/img/qiniu-logo2.png)
}

.momo #header .navbar .logo a {
    background-image: url(/static/public/img/momo-logo.png);
    background-size: contain
}

.cloudzgc #header .navbar .logo a {
    background-image: url(/static/public/img/zj-logo2.png);
    background-size: 174px 30px;
    width: 174px;
    height: 30px
}

.cloudzgc .setting-con .detail>ul>li:nth-child(3) {
    display: none
}

.ustack #header .navbar .logo a {
    background-image: url(/static/public/img/logo.png)
}

#header {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    z-index: 10;
    background-color: #007382
}

#header .navbar {
    padding: 0;
    height: 50px
}

#header .navbar .logo {
    margin: 0 0 0 16px;
    float: left;
    width: 152px
}

#header .navbar .logo a {
    display: inline-block;
    margin-top: 8px;
    width: 152px;
    height: 34px;
    background: none 0 0 no-repeat;
    background-size: 152px 34px
}

#header .navbar .region {
    float: left;
    margin-top: 12px;
    margin-right: 29px;
    padding-left: 42px;
    padding-right: 20px;
    height: 26px;
    line-height: 26px;
    border-radius: 13px;
    background: #006779 url(/static/public/css/utils/images/region_icon.png) 20px 5px no-repeat;
    background-size: 10px 16px;
    font-size: 13px;
    color: #98d4df
}

#header .navbar .user-info {
    position: absolute;
    left: 216px;
    right: 0;
    top: 0;
    z-index: 10
}

#header .navbar .user-info a {
    position: relative;
    display: block
}

#header .navbar .user-info a.user-center {
    float: left
}

#header .navbar .user-info .profile {
    float: right;
    position: relative;
    height: 50px;
    margin-right: 20px
}

#header .navbar .user-info .profile a {
    height: 50px;
    padding: 0 16px;
    color: #90ccd7
}

#header .navbar .user-info .profile a:hover {
    color: #fff
}

#header .navbar .user-info .profile a.selected {
    color: #fff
}

#header .navbar .user-info .profile a.selected .arrow {
    border-bottom: 7px solid #fff
}

#header .navbar .user-info .profile>a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 175px
}

#header .navbar .user-info .profile img {
    float: left;
    margin-top: 10px;
    width: 28px;
    height: 28px;
    border-radius: 14px
}

#header .navbar .user-info .profile span {
    margin-left: 8px;
    line-height: 50px
}

#header .navbar .user-info .profile .arrow {
    position: absolute;
    top: 22px;
    right: 0;
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom: 7px solid #90ccd7;
    border-left: 7px solid transparent
}

#header .navbar .user-info .profile .account {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 1001;
    display: none;
    width: 135px;
    padding-bottom: 4px;
    border: 1px solid #ddd;
    border-top: 3px solid #00afc8;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
    box-shadow-top: none;
    border-radius: 2px
}

#header .navbar .user-info .profile .account li:last-child {
    border-bottom: none
}

#header .navbar .user-info .profile .account li a {
    display: block;
    padding: 0 0 0 20px;
    height: 34px;
    line-height: 34px;
    color: #252f3d
}

#header .navbar .user-info .profile .account li a:hover {
    background-color: #b9f1f9
}

#header .navbar .user-info .profile .account li span {
    margin: 0;
    line-height: 34px
}

#header .navbar .user-info .profile .account li.lang {
    border-top: 1px solid #e7ebed;
    border-bottom: 1px solid #e7ebed
}

#header .navbar .user-info .profile .account li.lang a {
    display: inline-block
}

#header .navbar .user-info .profile .account li.lang a:hover,
#header .navbar .user-info .profile .account li.lang a:active,
#header .navbar .user-info .profile .account li.lang a.selected {
    background-color: #fff;
    color: #00afc8
}

#header .navbar .user-info .profile .account li.lang a.selected {
    cursor: default
}

#header .navbar .user-info .profile .account li .english {
    padding-right: 12px
}

#header .navbar .user-info .profile .account li .chinese {
    padding-left: 12px
}

#header .navbar .user-info .profile:hover a {
    color: #fff
}

#header .navbar .user-info .profile:hover .arrow {
    border-bottom: 7px solid #fff
}

#header .navbar .user-info .region {
    position: relative;
    padding-right: 30px
}

#header .navbar .user-info .region:before {
    content: "";
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #90ccd7;
    right: 10px;
    top: 10px
}

#header .navbar .user-info .region a.regionSwitcher {
    color: #90ccd7
}

#header .navbar .user-info .region .regionSelector {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 1001;
    display: none;
    width: 135px;
    padding-bottom: 4px;
    border: 1px solid #ddd;
    border-top: 3px solid #00afc8;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
    box-shadow-top: none;
    border-radius: 2px;
    top: 38px;
    left: 0;
    right: auto
}

#header .navbar .user-info .region .regionSelector li:last-child {
    border-bottom: none
}

#header .navbar .user-info .region .regionSelector li a {
    display: block;
    padding: 0 0 0 20px;
    height: 34px;
    line-height: 34px;
    color: #252f3d
}

#header .navbar .user-info .region .regionSelector li a:hover {
    background-color: #b9f1f9
}

#header .navbar .user-info .region .regionSelector li span {
    margin: 0;
    line-height: 34px
}

#header .navbar .user-info .region .regionSelector:before {
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    content: "";
    height: 40px;
    z-index: -1
}

#header .navbar .user-info .region .regionSelector ul li span.selected {
    color: #00afc8;
    display: block;
    height: 34px;
    line-height: 34px;
    padding: 0 0 0 20px;
    cursor: default
}

#header .navbar .user-info .region:hover a.regionSwitcher {
    color: #fff
}

#header .navbar .user-info .region:hover:before {
    border-bottom-color: #fff
}

#header .navbar .user-info .region:hover>div.regionSelector {
    display: block
}

#header .navbar .user-info .projects {
    float: left;
    position: relative;
    padding-right: 30px;
    margin: 12px 29px 0 0;
    background-color: #006779;
    border-radius: 40px
}

#header .navbar .user-info .projects:before {
    content: "";
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #90ccd7;
    right: 10px;
    top: 10px
}

#header .navbar .user-info .projects .projectSwitcher {
    color: #90ccd7;
    line-height: 26px;
    height: 26px;
    padding-left: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 140px
}

#header .navbar .user-info .projects .projectSelector {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 1001;
    display: none;
    width: 135px;
    padding-bottom: 4px;
    border: 1px solid #ddd;
    border-top: 3px solid #00afc8;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
    box-shadow-top: none;
    border-radius: 2px;
    width: 220px;
    top: 38px;
    left: 0;
    right: auto
}

#header .navbar .user-info .projects .projectSelector li:last-child {
    border-bottom: none
}

#header .navbar .user-info .projects .projectSelector li a {
    display: block;
    padding: 0 0 0 20px;
    height: 34px;
    line-height: 34px;
    color: #252f3d
}

#header .navbar .user-info .projects .projectSelector li a:hover {
    background-color: #b9f1f9
}

#header .navbar .user-info .projects .projectSelector li span {
    margin: 0;
    line-height: 34px
}

#header .navbar .user-info .projects .projectSelector:before {
    position: absolute;
    left: 0;
    width: 120px;
    top: -30px;
    content: "";
    height: 40px;
    z-index: -1
}

#header .navbar .user-info .projects .projectSelector ul {
    max-height: 360px;
    overflow-y: auto
}

#header .navbar .user-info .projects .projectSelector ul li.leading {
    padding-left: 12px;
    color: #a8b3be;
    padding-top: 10px;
    position: relative
}

#header .navbar .user-info .projects .projectSelector ul li.leading:before {
    content: "";
    height: 1px;
    background-color: #dcdcdc;
    position: absolute;
    left: 70px;
    right: 12px;
    top: 50%;
    margin-top: 3px
}

#header .navbar .user-info .projects .projectSelector ul li span.selected {
    color: #00afc8;
    display: block;
    height: 34px;
    line-height: 34px;
    padding: 0 0 0 20px;
    cursor: default
}

#header .navbar .user-info .projects .projectSelector ul li strong {
    font-weight: normal;
    color: #a8bebe;
    font-size: 12px
}

#header .navbar .user-info .projects .projectSelector ul li span.selected,
#header .navbar .user-info .projects .projectSelector ul li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px
}

#header .navbar .user-info .projects:hover a.projectSwitcher {
    color: #fff
}

#header .navbar .user-info .projects:hover:before {
    border-bottom-color: #fff
}

#header .navbar .user-info .projects:hover>div.projectSelector {
    display: block;
    width: 280px
}

#header .navbar .switcher {
    float: right;
    margin-right: 20px
}

#header .navbar .switcher a {
    border-right: 1px solid #006779;
    display: block;
    float: left;
    line-height: 50px;
    padding: 0 20px;
    color: #90ccd7
}

#header .navbar .switcher a:hover {
    color: #fff
}

#header .navbar .switcher a:first-child {
    border-left: 1px solid #006779
}

#header .navbar .switcher a.selected {
    cursor: default;
    color: #fff
}

#header .navbar .switcher a.active {
    background-color: #006779;
    color: #fff
}

@media screen and (max-width:935px) {
    #header .navbar .switcher a {
        padding: 0 10px
    }
}

@media screen and (max-width:792px) {
    #header .navbar .switcher a {
        padding: 0 5px
    }
    #header .navbar .user-info .profile a {
        padding: 2px
    }
    #header .navbar .user-info .profile a span {
        display: none
    }
    #header .navbar .user-info .profile .arrow {
        display: none
    }
}

@media screen and (max-width:725px) {
    #header .navbar .switcher a {
        padding: 0
    }
}

@media screen and (max-width:665px) {
    #header .navbar .user-info .region {
        margin-right: 0
    }
    #header .navbar .user-info .projects {
        margin-right: 0
    }
}

@media screen and (max-width:609px) {
    #header .navbar .switcher {
        margin-right: 0
    }
    #header .navbar .switcher a {
        display: block;
        width: 15px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 10px
    }
    #header .navbar .user-info .profile {
        margin-right: 0
    }
}

@media screen and (max-width:576px) {
    #header .navbar .region {
        padding-right: 0;
        padding-left: 0;
        background: #006779
    }
    #header .navbar .user-info .region {
        padding: 0 10px
    }
    #header .navbar .user-info .region a {
        display: block;
        width: 20px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }
    #header .navbar .user-info .projects a {
        display: block;
        width: 20px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0
    }
}

@media screen and (max-width:470px) {
    #header .navbar .user-info .profile {
        display: none
    }
}

@media screen and (max-width:435px) {
    #header .navbar .user-info .switcher a:nth-child(3) {
        display: none
    }
}

.main_content #sidebar {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 195px;
    min-width: 195px;
    max-width: 195px;
    position: relative;
    overflow: hidden;
    background-color: #e6ebec;
    z-index: 4;
    -webkit-transition-duration: .25s;
    -moz-transition-duration: .25s;
    -o-transition-duration: .25s;
    transition-duration: .25s
}

.main_content #sidebar li {
    position: relative
}

.main_content .menu {
    right: -16px;
    margin-left: 0;
    background-color: #e6ebec;
    outline: none
}

.main_content .menu h3 {
    margin: 0px;
    padding-left: 20px;
    height: 38px;
    font-size: 12px;
    font-weight: normal;
    line-height: 38px;
    color: #93b1bb;
    background-color: #e6ebec
}

.main_content .menu>li:last-child {
    margin-bottom: 15px
}

.main_content .menu li {
    font-size: 13px;
    color: #527583
}

.main_content .menu li li {
    height: 38px;
    line-height: 38px
}

.main_content .menu li ul {
    background-color: #e6ebec
}

.main_content .menu li a {
    display: block;
    height: 38px;
    color: #527583;
    padding-left: 20px
}

.main_content .menu li a.selected {
    background-color: #00afc8 !important;
    color: #fff
}

.main_content .menu li a:hover,
.main_content .menu li a:focus,
.main_content .menu li a:active {
    text-decoration: none;
    background-color: #b9f1f9
}

.main_content .menu li a span {
    vertical-align: middle
}

.main_content .menu i,
.main_content .table-content i,
.main_content .billApp .table i {
    display: inline-block;
    background: url(/static/public/css/utils/images/menu_icon_v8.png) 0 0 no-repeat;
    background-size: 941px 40px;
    height: 17px;
    width: 17px;
    margin-right: 12px;
    vertical-align: middle
}

.main_content .menu i.vpn,
.main_content .table-content i.vpn,
.main_content .billApp .table i.vpn {
    background-position: 1px 0
}

.main_content .menu i.security,
.main_content .table-content i.security,
.main_content .billApp .table i.security {
    background-position: -25px 0
}

.main_content .menu i.volume,
.main_content .table-content i.volume,
.main_content .billApp .table i.volume {
    background-position: -51px 2px
}

.main_content .menu i.lb,
.main_content .table-content i.lb,
.main_content .billApp .table i.lb {
    background-position: -76px 0
}

.main_content .menu i.overview,
.main_content .table-content i.overview,
.main_content .billApp .table i.overview {
    background-position: -103px 0
}

.main_content .menu i.ip,
.main_content .table-content i.ip,
.main_content .billApp .table i.ip {
    background-position: -128px 0
}

.main_content .menu i.network,
.main_content .table-content i.network,
.main_content .billApp .table i.network {
    background-position: -153px 3px
}

.main_content .menu i.subnet,
.main_content .table-content i.subnet,
.main_content .billApp .table i.subnet {
    background-position: -436px 2px
}

.main_content .menu i.image,
.main_content .table-content i.image,
.main_content .billApp .table i.image,
.main_content .menu i.snap-image,
.main_content .table-content i.snap-image,
.main_content .billApp .table i.snap-image {
    background-position: -179px 0
}

.main_content .menu i.snapshot,
.main_content .table-content i.snapshot,
.main_content .billApp .table i.snapshot {
    background-position: -205px 1px
}

.main_content .menu i.router,
.main_content .table-content i.router,
.main_content .billApp .table i.router {
    background-position: -231px 0
}

.main_content .menu i.key-pair,
.main_content .table-content i.key-pair,
.main_content .billApp .table i.key-pair {
    background-position: -256px 1px
}

.main_content .menu i.interface,
.main_content .table-content i.interface,
.main_content .billApp .table i.interface {
    background-position: -283px 2px
}

.main_content .menu i.topology,
.main_content .table-content i.topology,
.main_content .billApp .table i.topology {
    background-position: -309px 0
}

.main_content .menu i.instance,
.main_content .table-content i.instance,
.main_content .billApp .table i.instance {
    background-position: -334px 1px
}

.main_content .menu i.record,
.main_content .table-content i.record,
.main_content .billApp .table i.record {
    background-position: -361px 3px
}

.main_content .menu i.ticket,
.main_content .table-content i.ticket,
.main_content .billApp .table i.ticket {
    background-position: -387px 0
}

.main_content .menu i.operation,
.main_content .table-content i.operation,
.main_content .billApp .table i.operation {
    background-position: -412px 0
}

.main_content .menu i.monitor,
.main_content .table-content i.monitor,
.main_content .billApp .table i.monitor {
    background-position: -463px 2px
}

.main_content .menu i.alarm,
.main_content .table-content i.alarm,
.main_content .billApp .table i.alarm {
    background-position: -463px 2px
}

.main_content .menu i.notification,
.main_content .table-content i.notification,
.main_content .billApp .table i.notification {
    background-position: -489px 2px
}

.main_content .menu i.account,
.main_content .table-content i.account,
.main_content .billApp .table i.account {
    background-position: -540px 0
}

.main_content .menu i.project,
.main_content .table-content i.project,
.main_content .billApp .table i.project {
    background-position: -515px 0
}

.main_content .menu i.role,
.main_content .table-content i.role,
.main_content .billApp .table i.role {
    background-position: -567px 0
}

.main_content .menu i.record_overview,
.main_content .table-content i.record_overview,
.main_content .billApp .table i.record_overview {
    background-position: -592px 3px
}

.main_content .menu i.account_charge,
.main_content .table-content i.account_charge,
.main_content .billApp .table i.account_charge {
    background-position: -619px 0
}

.main_content .menu i.collaboration,
.main_content .table-content i.collaboration,
.main_content .billApp .table i.collaboration {
    background-position: -645px 0
}

.main_content .menu i.account_record,
.main_content .table-content i.account_record,
.main_content .billApp .table i.account_record {
    background-position: -671px 0
}

.main_content .menu i.listener,
.main_content .table-content i.listener,
.main_content .billApp .table i.listener {
    background-position: -695px 0
}

.main_content .menu i.file-sharing,
.main_content .table-content i.file-sharing,
.main_content .billApp .table i.file-sharing {
    background-position: -718px 1px
}

.main_content .menu i.share,
.main_content .table-content i.share,
.main_content .billApp .table i.share {
    background-position: -718px 1px
}

.main_content .menu i.pool,
.main_content .table-content i.pool,
.main_content .billApp .table i.pool {
    background-position: -745px 2px
}

.main_content .menu i.network-sharing,
.main_content .table-content i.network-sharing,
.main_content .billApp .table i.network-sharing {
    background-position: -771px 0
}

.main_content .menu i.invoice,
.main_content .table-content i.invoice,
.main_content .billApp .table i.invoice {
    background-position: -823px 0
}

.main_content .menu i.app-center,
.main_content .table-content i.app-center,
.main_content .billApp .table i.app-center {
    background-position: -925px 0
}

.main_content .menu li .selected i.vpn,
.main_content .table-content li .selected i.vpn,
.main_content .billApp .table li .selected i.vpn {
    background-position: 1px -18px
}

.main_content .menu li .selected i.security,
.main_content .table-content li .selected i.security,
.main_content .billApp .table li .selected i.security {
    background-position: -25px -18px
}

.main_content .menu li .selected i.volume,
.main_content .table-content li .selected i.volume,
.main_content .billApp .table li .selected i.volume {
    background-position: -51px -16px
}

.main_content .menu li .selected i.lb,
.main_content .table-content li .selected i.lb,
.main_content .billApp .table li .selected i.lb {
    background-position: -76px -18px
}

.main_content .menu li .selected i.overview,
.main_content .table-content li .selected i.overview,
.main_content .billApp .table li .selected i.overview {
    background-position: -103px -18px
}

.main_content .menu li .selected i.ip,
.main_content .table-content li .selected i.ip,
.main_content .billApp .table li .selected i.ip {
    background-position: -128px -18px
}

.main_content .menu li .selected i.network,
.main_content .table-content li .selected i.network,
.main_content .billApp .table li .selected i.network {
    background-position: -153px -15px
}

.main_content .menu li .selected i.subnet,
.main_content .table-content li .selected i.subnet,
.main_content .billApp .table li .selected i.subnet {
    background-position: -436px -16px
}

.main_content .menu li .selected i.image,
.main_content .table-content li .selected i.image,
.main_content .billApp .table li .selected i.image,
.main_content .menu li .selected i.snap-image,
.main_content .table-content li .selected i.snap-image,
.main_content .billApp .table li .selected i.snap-image {
    background-position: -179px -18px
}

.main_content .menu li .selected i.snapshot,
.main_content .table-content li .selected i.snapshot,
.main_content .billApp .table li .selected i.snapshot {
    background-position: -205px -17px
}

.main_content .menu li .selected i.router,
.main_content .table-content li .selected i.router,
.main_content .billApp .table li .selected i.router {
    background-position: -231px -18px
}

.main_content .menu li .selected i.key-pair,
.main_content .table-content li .selected i.key-pair,
.main_content .billApp .table li .selected i.key-pair {
    background-position: -256px -17px
}

.main_content .menu li .selected i.interface,
.main_content .table-content li .selected i.interface,
.main_content .billApp .table li .selected i.interface {
    background-position: -283px -16px
}

.main_content .menu li .selected i.topology,
.main_content .table-content li .selected i.topology,
.main_content .billApp .table li .selected i.topology {
    background-position: -309px -18px
}

.main_content .menu li .selected i.instance,
.main_content .table-content li .selected i.instance,
.main_content .billApp .table li .selected i.instance {
    background-position: -334px -17px
}

.main_content .menu li .selected i.record,
.main_content .table-content li .selected i.record,
.main_content .billApp .table li .selected i.record {
    background-position: -361px -15px
}

.main_content .menu li .selected i.ticket,
.main_content .table-content li .selected i.ticket,
.main_content .billApp .table li .selected i.ticket {
    background-position: -387px -18px
}

.main_content .menu li .selected i.operation,
.main_content .table-content li .selected i.operation,
.main_content .billApp .table li .selected i.operation {
    background-position: -412px -18px
}

.main_content .menu li .selected i.monitor,
.main_content .table-content li .selected i.monitor,
.main_content .billApp .table li .selected i.monitor {
    background-position: -463px -16px
}

.main_content .menu li .selected i.notification,
.main_content .table-content li .selected i.notification,
.main_content .billApp .table li .selected i.notification {
    background-position: -489px -16px
}

.main_content .menu li .selected i.account,
.main_content .table-content li .selected i.account,
.main_content .billApp .table li .selected i.account {
    background-position: -540px -18px
}

.main_content .menu li .selected i.project,
.main_content .table-content li .selected i.project,
.main_content .billApp .table li .selected i.project {
    background-position: -515px -18px
}

.main_content .menu li .selected i.role,
.main_content .table-content li .selected i.role,
.main_content .billApp .table li .selected i.role {
    background-position: -567px -18px
}

.main_content .menu li .selected i.record_overview,
.main_content .table-content li .selected i.record_overview,
.main_content .billApp .table li .selected i.record_overview {
    background-position: -592px -15px
}

.main_content .menu li .selected i.account_charge,
.main_content .table-content li .selected i.account_charge,
.main_content .billApp .table li .selected i.account_charge {
    background-position: -619px -18px
}

.main_content .menu li .selected i.collaboration,
.main_content .table-content li .selected i.collaboration,
.main_content .billApp .table li .selected i.collaboration {
    background-position: -645px -18px
}

.main_content .menu li .selected i.account_record,
.main_content .table-content li .selected i.account_record,
.main_content .billApp .table li .selected i.account_record {
    background-position: -671px -18px
}

.main_content .menu li .selected i.file-sharing,
.main_content .table-content li .selected i.file-sharing,
.main_content .billApp .table li .selected i.file-sharing {
    background-position: -718px -15px
}

.main_content .menu li .selected i.share,
.main_content .table-content li .selected i.share,
.main_content .billApp .table li .selected i.share {
    background-position: -718px -15px
}

.main_content .menu li .selected i.pool,
.main_content .table-content li .selected i.pool,
.main_content .billApp .table li .selected i.pool {
    background-position: -745px -16px
}

.main_content .menu li .selected i.network-sharing,
.main_content .table-content li .selected i.network-sharing,
.main_content .billApp .table li .selected i.network-sharing {
    background-position: -771px -18px
}

.main_content .menu li .selected i.invoice,
.main_content .table-content li .selected i.invoice,
.main_content .billApp .table li .selected i.invoice {
    background-position: -823px -18px
}

.main_content .menu li .selected i.app-center,
.main_content .table-content li .selected i.app-center,
.main_content .billApp .table li .selected i.app-center {
    background-position: -925px -18px
}

@media screen and (min-width:1680px) {
    .main_content #sidebar {
        width: 260px;
        min-width: 260px;
        max-width: 260px
    }
    .main_content .menu h3 {
        height: 42px;
        line-height: 42px
    }
    .main_content .menu li li {
        height: 42px;
        line-height: 42px
    }
    .main_content .menu li a {
        height: 42px
    }
}

.nano {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.nano .content {
    position: absolute;
    overflow: scroll;
    overflow-x: hidden;
    top: 0;
    bottom: 0;
    left: 0
}

.nano .content .projectWrapper {
    width: 195px
}

.nano .content .projectWrapper .select {
    width: auto;
    margin: 10px auto;
    display: block;
    border-color: #527583
}

.nano .content .projectWrapper .select:hover {
    border-color: #00b4d2
}

.nano .content::-webkit-scrollbar {
    visibility: hidden
}

.nano>.pane {
    position: absolute;
    width: 8px;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

.nano>.pane>.slider {
    background: #000000;
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    margin: 0 1px;
    border-radius: 3px
}

.nano:hover>.pane,
.pane.active,
.pane.flashed {
    opacity: 0.99
}

.tip-mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    -o-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -webkit-transition: all .15s ease-out;
    transition: all .15s ease-out
}

.tip-mask div {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    position: absolute
}

.tip-mask div .index {
    display: inline-block;
    margin-right: 7px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border: 3px solid #fff;
    border-radius: 50%
}

.tip-mask div .arrow {
    position: absolute;
    display: block;
    width: 30px;
    height: 25px;
    background: url(/static/public/css/utils/images/tip_arrow.png) 0 0 no-repeat
}

.tip-mask .step-1 {
    right: 250px;
    top: 70px
}

.tip-mask .step-1 .arrow {
    top: -30px;
    right: 13px;
    -ms-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg)
}

.tip-mask .step-1.isolate {
    right: 180px
}

.tip-mask .step-2 {
    right: 20px;
    top: 70px;
    width: 160px;
    padding-left: 40px;
    line-height: 26px
}

.tip-mask .step-2 .index {
    position: absolute;
    left: 0;
    top: 0
}

.tip-mask .step-2 .arrow {
    top: -30px;
    left: 5px;
    -ms-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -webkit-transform: rotate(110deg);
    transform: rotate(110deg)
}

.tip-mask .step-3 {
    left: 285px;
    top: 70px
}

.tip-mask .step-3 .arrow {
    top: -30px;
    left: -35px;
    -ms-transform: rotate(100deg);
    -moz-transform: rotate(100deg);
    -webkit-transform: rotate(100deg);
    transform: rotate(100deg)
}

.tip-mask .step-4 {
    left: 210px;
    top: 600px
}

.tip-mask .step-4 .arrow {
    top: 20px;
    left: -40px;
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.tip-mask .step-5 {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 62px;
    line-height: 62px;
    text-align: center;
    width: 260px;
    background-color: #09b29c;
    border-radius: 3px;
    transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    -moz-transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    -webkit-transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    -ms-transform: translate(-50%, -50%) scale(1, 1) translateZ(0);
    cursor: pointer
}

@media screen and (min-width:1680px) {
    .tip-mask .step-4 {
        top: 650px
    }
}

.slick-header.ui-state-default,
.slick-headerrow.ui-state-default {
    width: 100%;
    overflow: hidden;
    border-left: 0px
}

.slick-row:hover .slick-cell,
.slick-row:active .slick-cell {
    background-color: #e1f4f7
}

.slick-header-columns,
.slick-headerrow-columns {
    position: relative;
    white-space: nowrap;
    cursor: default;
    overflow: hidden;
    background-color: #f0f0f0
}

.slick-header-column.ui-state-default {
    position: relative;
    display: inline-block;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    height: 28px;
    line-height: 28px;
    margin: 0;
    padding: 4px;
    border-left: 0px;
    border-top: 0px;
    border-bottom: 0px;
    float: left;
    background-color: #ecf0f2;
    color: #626f7e;
    font-size: 12px
}

.slick-header-column.ui-state-default:before {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fff;
    width: 1px;
    content: ""
}

.slick-header-column.ui-state-default>span:first-child {
    display: inline-block;
    margin-left: 12px
}

.slick-header-columns .slick-header-column:first-child>span {
    margin-left: 6px;
    margin-right: 6px
}

.slick-header-column.ui-state-default .selectAll {
    position: relative
}

.slick-header-column.ui-state-default:last-child {
    border-right: none
}

.slick-headerrow-column.ui-state-default {
    padding: 4px
}

.slick-header-column-sorted {
    font-style: italic
}

.slick-sort-indicator {
    width: 8px;
    height: 7px;
    margin-left: 4px;
    margin-top: 6px;
    background: url(/static/public/lib/jquery/slickgrid/icon-arrow.png);
    visibility: hidden;
    display: inline-block
}

.slick-sort-indicator-desc {
    visibility: visible
}

.slick-sort-indicator-asc {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    visibility: visible
}

.slick-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    cursor: col-resize;
    width: 4px;
    right: 0px;
    top: 0;
    height: 100%
}

.slick-sortable-placeholder {
    background: silver
}

.grid-canvas {
    position: relative;
    outline: 0
}

.slick-row.ui-widget-content,
.slick-row.ui-state-active {
    position: absolute;
    border: 0px;
    width: 100%
}

.slick-row .slick-cell.selected {
    background-color: #b9f1f9
}

.slick-cell,
.slick-headerrow-column {
    position: absolute;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    vertical-align: middle;
    z-index: 1;
    padding: 1px 8px 2px 7px;
    margin: 0;
    white-space: nowrap;
    cursor: default
}

.slick-cell {
    line-height: 24px;
    height: 24px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #252f3d;
    padding-left: 16px;
    border-right: 1px solid rgba(0, 0, 0, 0)
}

.slick-group-toggle {
    display: inline-block
}

.slick-cell.highlighted {
    background: lightskyblue;
    background: rgba(0, 0, 255, 0.2);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s
}

.slick-cell.flashing {
    border: 1px solid red !important
}

.slick-cell.editable {
    z-index: 11;
    overflow: visible;
    background: white;
    border-color: black;
    border-style: solid
}

.slick-cell:focus {
    outline: none
}

.slick-reorder-proxy {
    display: inline-block;
    background: blue;
    opacity: 0.15;
    cursor: move
}

.slick-reorder-guide {
    display: inline-block;
    height: 2px;
    background: blue;
    opacity: 0.7
}

.slick-selection {
    z-index: 10;
    position: absolute;
    border: 2px dashed black
}

.instanceApp #uoscloudtopology {
    padding: 0
}

.instanceApp #uoscloudtopology .topology {
    position: relative;
    height: 100%
}

.instanceApp #uoscloudtopology .topology .pageHeader {
    padding: 20px
}

.instanceApp #uoscloudtopology .topology .pageHeader a[wp-type="button"] {
    margin-right: 8px;
    float: left;
    display: block
}

.instanceApp #uoscloudtopology .topology .pageHeader a.iconRefresh {
    width: 14px;
    height: 34px;
    margin-right: 0;
    background-color: #00afc8;
    padding: 0 10px;
    position: relative;
    display: inline-block;
    border-radius: 2px
}

.instanceApp #uoscloudtopology .topology .pageHeader a.iconRefresh:before {
    position: absolute;
    background: transparent url("/static/modules/apps/instance/i/icon-refresh2.png") 11px center no-repeat;
    background-size: 14px 14px;
    content: "";
    width: 34px;
    height: 34px;
    left: 0;
    top: 0
}

.instanceApp #uoscloudtopology .topology .pageHeader a.iconRefresh:hover {
    background-color: #00a5bd
}

.instanceApp #uoscloudtopology .topology .pageHeader a.iconRefresh:active {
    background-color: #009bb1
}

.instanceApp #uoscloudtopology .topology .pageHeader a.iconRefresh.spin {
    cursor: default
}

.instanceApp #uoscloudtopology .topology .pageHeader a.iconRefresh.spin:before {
    animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -webkit-animation: spin 1s linear infinite
}

.instanceApp #uoscloudtopology .topology .pageHeader .toggles {
    position: absolute;
    right: 20px;
    top: 20px
}

.instanceApp #uoscloudtopology .topology .pageHeader .toggles .toggler {
    background-color: #ecf0f2;
    color: #738293;
    font-size: 13px;
    padding: 0 16px;
    height: 34px;
    line-height: 34px;
    border-radius: 2px;
    display: block;
    float: right;
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 0
}

.instanceApp #uoscloudtopology .topology .pageHeader .toggles .toggler:first-child {
    border-left: 1px solid #fff;
    border-top-left-radius: 0px;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 2px
}

.instanceApp #uoscloudtopology .topology .pageHeader .toggles .toggler:hover {
    background-color: #b9f1f9
}

.instanceApp #uoscloudtopology .topology .pageHeader .toggles .toggler.selected {
    background-color: #5cd0e0;
    color: #252f3d
}

.instanceApp #uoscloudtopology .topology .pageHeader .loading {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat;
    position: relative;
    top: 6px;
    vertical-align: middle;
    border: none;
    float: right
}

.instanceApp #uoscloudtopology .topology .pageHeader .loading:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

.instanceApp #uoscloudtopology .topology .topologyCanvas {
    margin-top: 10px;
    padding: 0 17px 10px;
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    bottom: 0;
    overflow: auto
}

.instanceApp #uoscloudtopology .topology image.loading {
    display: block;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

#uoscloudinstance .detailView .related-images th,
#uoscloudvolume .detailView .related-resources th {
    border-bottom-color: transparent
}

#uoscloudinstance .detailView .related-images th:nth-child(n+2),
#uoscloudvolume .detailView .related-resources th:nth-child(n+2) {
    border-bottom: 1px solid #ecf0f2
}

#uoscloudinstance .detailView .related-images th span,
#uoscloudvolume .detailView .related-resources th span {
    visibility: hidden
}

#uoscloudinstance .detailView .related-images tr:hover td,
#uoscloudvolume .detailView .related-resources tr:hover td {
    background-color: white
}

#uoscloudinstance .detailView .related-images tr:hover td:nth-child(n+2),
#uoscloudvolume .detailView .related-resources tr:hover td:nth-child(n+2) {
    background-color: #e1f4f7
}

#uoscloudinstance .detailView .related-images tr td,
#uoscloudvolume .detailView .related-resources tr td {
    border-bottom-color: transparent;
    height: 40px
}

#uoscloudinstance .detailView .related-images tr td:first-child,
#uoscloudvolume .detailView .related-resources tr td:first-child {
    padding-left: 0
}

#uoscloudinstance .detailView .related-images tr td:nth-child(n+2),
#uoscloudvolume .detailView .related-resources tr td:nth-child(n+2) {
    border-bottom: 1px solid #ecf0f2
}

#uoscloudinstance .detailView .related-images tr td .status,
#uoscloudvolume .detailView .related-resources tr td .status {
    display: block;
    margin-right: 5px;
    height: 20px;
    line-height: 20px;
    padding-left: 20px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat;
    position: relative;
    vertical-align: middle;
    border: none;
    text-transform: capitalize
}

#uoscloudinstance .detailView .related-images tr td .status:before,
#uoscloudvolume .detailView .related-resources tr td .status:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

#uoscloudinstance .detailView .related-images tr td .status.active,
#uoscloudvolume .detailView .related-resources tr td .status.active {
    display: inline-block;
    background: url("/static/modules/apps/instance/i/status/icon-status-active.png") 0 center no-repeat;
    background-size: 15px 15px
}

#uoscloudinstance .detailView .related-images tr td .status.active:before,
#uoscloudvolume .detailView .related-resources tr td .status.active:before {
    display: none
}

#uoscloudinstance .detailView .related-images tr td .timelineWrapper,
#uoscloudvolume .detailView .related-resources tr td .timelineWrapper {
    min-width: 80px;
    position: relative;
    height: 100%;
    padding-right: 52px;
    text-align: right
}

#uoscloudinstance .detailView .related-images tr td .timelineWrapper .timetext,
#uoscloudvolume .detailView .related-resources tr td .timelineWrapper .timetext {
    border-radius: 2px;
    padding: 0 16px;
    background-color: #e6ebec;
    position: relative;
    top: 6px
}

#uoscloudinstance .detailView .related-images tr td .timelineWrapper .timetext:after,
#uoscloudvolume .detailView .related-resources tr td .timelineWrapper .timetext:after {
    content: "";
    position: absolute;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #e6ebec;
    right: -9px;
    top: 50%;
    width: 5px;
    height: 0;
    margin-top: -5px
}

#uoscloudinstance .detailView .related-images tr td .timelineWrapper .timespot,
#uoscloudvolume .detailView .related-resources tr td .timelineWrapper .timespot {
    border: 1px solid #b2b8ba;
    background-color: white;
    border-radius: 15px;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    margin-top: -9.5px;
    right: 20px;
    z-index: 2
}

#uoscloudinstance .detailView .related-images tr td .timelineWrapper .timespot:before,
#uoscloudvolume .detailView .related-resources tr td .timelineWrapper .timespot:before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 11px;
    background-color: #b2b8ba;
    display: block;
    position: absolute;
    left: 2px;
    top: 2px
}

#uoscloudinstance .detailView .related-images tr td .timelineWrapper .nextLine,
#uoscloudvolume .detailView .related-resources tr td .timelineWrapper .nextLine,
#uoscloudinstance .detailView .related-images tr td .timelineWrapper .beforeLine,
#uoscloudvolume .detailView .related-resources tr td .timelineWrapper .beforeLine {
    width: 1px;
    background-color: #b2b8ba;
    position: absolute;
    top: 50%;
    bottom: -1px;
    right: 28.5px
}

#uoscloudinstance .detailView .related-images tr td .timelineWrapper .beforeLine,
#uoscloudvolume .detailView .related-resources tr td .timelineWrapper .beforeLine {
    top: 0;
    bottom: 50%
}

#uoscloudinstance .detailView .related-images tr td .action-create-volume,
#uoscloudvolume .detailView .related-resources tr td .action-create-volume {
    background: transparent url("/static/modules/apps/instance/i/icon-add-volume.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    background-size: contain;
    margin-right: 16px
}

#uoscloudinstance .detailView .related-images tr td .action-create-volume:hover,
#uoscloudvolume .detailView .related-resources tr td .action-create-volume:hover {
    background-image: url("/static/modules/apps/instance/i/icon-add-volume-hover.png")
}

#uoscloudinstance .detailView .related-images tr td .action-create-volume {
    background: transparent url("/static/modules/apps/instance/i/icon-add-instance.png") 0 0 no-repeat;
    width: 16px;
    height: 15px;
    background-size: 16px 33px;
    margin-right: 16px
}

#uoscloudinstance .detailView .related-images tr td .action-create-volume:hover {
    background: transparent url("/static/modules/apps/instance/i/icon-add-instance.png") 0 bottom no-repeat;
    background-size: 16px 33px
}

#uoscloudrouter .vpnUserDiv {
    width: 414px
}

#uoscloudrouter .vpnUserDiv>div.th {
    padding-top: 10px;
    height: 14px;
    padding-left: 16px;
    text-align: left;
    color: #252f3d;
    font-size: 12px
}

#uoscloudrouter .vpnUserDiv>div.th .line {
    position: relative;
    height: 14px
}

#uoscloudrouter .vpnUserDiv>div.th .line>div {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    display: inline-block;
    padding-right: 12px;
    background-color: #fff;
    z-index: 2;
    height: 14px;
    line-height: 14px
}

#uoscloudrouter .vpnUserDiv>div.th .line:before {
    content: "";
    left: 0;
    right: 30px;
    top: 50%;
    height: 1px;
    background-color: #e7ebed;
    display: block;
    position: absolute
}

#uoscloudrouter .vpnUserDiv>div.th .line a.add {
    width: 16px;
    height: 16px;
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 -34px no-repeat;
    background-size: 16px 67px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -8px
}

#uoscloudrouter .vpnUserDiv>div.th .line a.add:hover {
    background-position: 0 bottom
}

#uoscloudrouter .vpnUserDiv>div.th .line a.add.disabled {
    opacity: 0.7;
    cursor: not-allowed
}

#uoscloudrouter .vpnUserDiv>div.th .line a.add.disabled:hover {
    background-position: 0 -34px
}

#uoscloudrouter .vpnUserDiv>div.list {
    padding-left: 16px
}

#uoscloudrouter .vpnUserDiv>div.list ul li {
    padding-left: 8px;
    margin-right: 30px;
    width: auto;
    line-height: 12px;
    min-height: 12px;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    position: relative
}

#uoscloudrouter .vpnUserDiv>div.list ul li:last-child {
    border-bottom: none
}

#uoscloudrouter .vpnUserDiv>div.list ul li:hover {
    background-color: #e1f4f7
}

#uoscloudrouter .vpnUserDiv>div.list ul li:hover .icon-edit,
#uoscloudrouter .vpnUserDiv>div.list ul li:hover .icon-close {
    visibility: visible
}

#uoscloudrouter .vpnUserDiv>div.list ul li .icon-edit {
    display: block;
    background: url("/static/modules/apps/instance/i/icon-edit.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 35px;
    right: 38px;
    top: 50%;
    position: absolute;
    margin-right: 0;
    margin-top: -8px;
    visibility: hidden
}

#uoscloudrouter .vpnUserDiv>div.list ul li .icon-edit:hover {
    background-position: 0 -22px
}

#uoscloudrouter .vpnUserDiv>div.list ul li .icon-close {
    display: block;
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 67px;
    right: 12px;
    top: 50%;
    position: absolute;
    margin-right: 0;
    margin-top: -8px;
    visibility: hidden
}

#uoscloudrouter .vpnUserDiv>div.list ul li .icon-close:hover {
    background-position: 0 -17px
}

#uoscloudrouter .vpnUserDiv>div.list ul li .icon-loading {
    display: block;
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat;
    position: relative;
    top: -2px;
    vertical-align: middle;
    border: none;
    right: 12px;
    top: 50%;
    position: absolute;
    margin-right: 0;
    margin-top: -10px
}

#uoscloudrouter .vpnUserDiv>div.list ul li .icon-loading:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

#uoscloudrouter .vpnUserDiv>div.list ul li.header {
    line-height: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e7ebed
}

#uoscloudrouter .vpnUserDiv>div.list ul li.header:hover {
    background-color: #fff
}

#uoscloudrouter .vpnUserDiv>div.list ul li.empty {
    color: #a8b3be
}

#uoscloudrouter .vpnUserDiv>div.list ul li.empty:hover {
    background-color: #fff
}

#uoscloudrouter .vpnUserDiv>div.list ul li label.size {
    float: right;
    display: inline-block;
    margin-right: 5px;
    line-height: 17px
}

#uoscloudrouter .vpnUserDiv>div.list ul li span {
    display: inline-block;
    width: 110px;
    line-height: 17px
}

#uoscloudrouter .vpnUserDiv .list ul {
    margin-left: 20px
}

#uoscloudrouter .vpnUserDiv .list ul .seePwd {
    background: transparent url("/static/modules/apps/instance/i/eye.png") 0 center no-repeat;
    background-size: 57px 15px;
    display: inline-block;
    width: 15px;
    height: 17px;
    position: relative;
    top: -2px
}

#uoscloudrouter .vpnUserDiv .list ul .seePwd:hover {
    background-position: -21px center
}

#uoscloudrouter .vpnUserDiv .list ul .seePwd:active {
    background-position: -42px center
}

#uoscloudrouter .vpnUserDiv .list ul .passwordAera {
    display: inline-block !important;
    text-indent: 1000000000px;
    background: transparent url("/static/modules/apps/instance/i/icon-dot.png") 0 center repeat-x;
    background-size: 6px auto;
    overflow: hidden
}

#uoscloudrouter .vpnUserDiv .list ul .passwordAera.show {
    text-indent: 0;
    background-image: none
}

#uoscloudrouter .vpnList .vpnNode {
    line-height: 21px;
    padding: 11px 20px 11px 14px;
    position: relative;
    overflow: hidden;
    width: 380px
}

#uoscloudrouter .vpnList .vpnNode:before {
    content: "";
    left: 85px;
    right: 30px;
    background-color: #e7ebed;
    display: block;
    position: absolute;
    height: 1px;
    top: 21px
}

#uoscloudrouter .vpnList .vpnNode span {
    float: left;
    font-size: 12px;
    color: #252f3d;
    line-height: 21px;
    padding: 5px 20px 5px 0
}

#uoscloudrouter .vpnList .vpnNode span.vpnLabel {
    display: block;
    clear: left;
    color: #738293;
    width: 100px;
    text-align: right;
    padding-left: 0
}

#uoscloudrouter .vpnList .vpnNode span.vpnStatus {
    text-transform: capitalize
}

#uoscloudrouter .vpnList .vpnNode .action-delete {
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 67px;
    display: block;
    position: absolute;
    right: 12px;
    top: 13px
}

#uoscloudrouter .vpnList .vpnNode .action-delete:hover {
    background-position: 0 -17px
}

#uoscloudrouter .vpnList .vpnNode .toggle {
    background-color: #bdc3c7;
    height: 21px;
    width: 60px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
    padding-left: 26px;
    text-transform: uppercase;
    line-height: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
    display: block;
    clear: both
}

#uoscloudrouter .vpnList .vpnNode .toggle:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    top: 3px;
    left: 5px;
    background-color: #7f8c8d;
    border-radius: 15px
}

#uoscloudrouter .vpnList .vpnNode .toggle.on {
    padding-left: 10px;
    padding-right: 26px;
    background-color: #c3ebf0;
    color: #00afc8
}

#uoscloudrouter .vpnList .vpnNode .toggle.on:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    top: 3px;
    right: 5px;
    left: auto;
    background-color: #00afc8;
    border-radius: 15px
}

#uoscloudrouter .panel[field="vpn_service"] .button-add {
    display: inline-block;
    float: none
}

#uoscloudrouter .panel[field="tunnel_service"] .toggle {
    display: inline-block;
    margin-left: 10px;
    top: -2px;
    background-color: #bdc3c7;
    height: 21px;
    width: 60px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
    padding-left: 26px;
    text-transform: uppercase;
    line-height: 15px;
    padding-top: 3px;
    padding-bottom: 3px
}

#uoscloudrouter .panel[field="tunnel_service"] .toggle:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    top: 3px;
    left: 5px;
    background-color: #7f8c8d;
    border-radius: 15px
}

#uoscloudrouter .panel[field="tunnel_service"] .toggle.on {
    padding-left: 10px;
    padding-right: 26px;
    background-color: #c3ebf0;
    color: #00afc8
}

#uoscloudrouter .panel[field="tunnel_service"] .toggle.on:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    top: 3px;
    right: 5px;
    left: auto;
    background-color: #00afc8;
    border-radius: 15px
}

#uoscloudrouter .pptp_service {
    overflow: hidden
}

#uoscloudrouter .vpnNode .vpn-button-bar {
    clear: both
}

#uoscloudrouter .panel[field="ipsec"] .link {
    display: inline-block;
    margin-top: 24px;
    margin-left: 20px
}

#uoscloudrouter .panel[field="ipsec"] .listener-header {
    margin-bottom: 10px
}

#uoscloudrouter .panel[field="ipsec"] .target-network {
    margin-top: 10px
}

#uoscloudrouter .panel[field="ipsec"] .listener-wp {
    margin-bottom: 0px
}

#uoscloudrouter .panel[field="ipsec"] .button-add {
    display: inline-block;
    float: none
}

#uoscloudrouter .panel[field="ipsec"] .toggle {
    display: inline-block;
    margin-left: 10px;
    top: -2px;
    background-color: #bdc3c7;
    height: 21px;
    width: 60px;
    border-radius: 20px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    position: relative;
    box-sizing: border-box;
    padding-left: 26px;
    text-transform: uppercase;
    line-height: 15px;
    padding-top: 3px;
    padding-bottom: 3px
}

#uoscloudrouter .panel[field="ipsec"] .toggle:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    top: 3px;
    left: 5px;
    background-color: #7f8c8d;
    border-radius: 15px
}

#uoscloudrouter .panel[field="ipsec"] .toggle.on {
    padding-left: 10px;
    padding-right: 26px;
    background-color: #c3ebf0;
    color: #00afc8
}

#uoscloudrouter .panel[field="ipsec"] .toggle.on:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    top: 3px;
    right: 5px;
    left: auto;
    background-color: #00afc8;
    border-radius: 15px
}

.vmModal.narrow .panel .select-create-row>div {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.vmModal.narrow .panel .select-create-row>div select,
.vmModal.narrow .panel .select-create-row>div span,
.vmModal.narrow .panel .select-create-row>div a {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.vmModal.narrow .panel .select-create-row>div span {
    line-height: 32px!important
}

.vmModal.narrow .panel .select-create-row>div a {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: right
}

.vmModal.narrow .panel .row.rowTabs .btn.disabled {
    background-color: #d9e3e5!important;
    color: #a8b3be;
    cursor: not-allowed;
    border-style: none
}

.vmModal.narrow .panel .row.rowTabs .btn.disabled:hover {
    background-color: #d9e3e5!important;
    color: #a8b3be
}

#uoscloudsecurity .detailView .settings .slide-target {
    padding-left: 179px;
    padding-top: 20px;
    position: relative;
    min-height: 373px
}

#uoscloudsecurity .detailView .settings .slide-target .sg_image {
    background: url("/static/modules/apps/instance/i/background-sg.png") 0 0 no-repeat;
    position: absolute;
    left: 0;
    top: 20px;
    width: 149px;
    height: 373px
}

#uoscloudsecurity .detailView .settings .slide-target .sg_image:before {
    position: absolute;
    left: 52px;
    top: 69px;
    content: "";
    width: 48px;
    height: 29px;
    display: block;
    background: url("/static/modules/apps/instance/i/icon-sg.png") 1px -78px no-repeat
}

#uoscloudsecurity .detailView .settings .slide-target .sg_image:after {
    position: absolute;
    left: 59px;
    top: 156px;
    content: "";
    width: 32px;
    height: 32px;
    display: block;
    background: url("/static/modules/apps/instance/i/icon-sg.png") -8px -115px no-repeat
}

#uoscloudsecurity .detailView .settings .slide-target.ingress .sg_image:before {
    background-position: 0 0
}

#uoscloudsecurity .detailView .settings .slide-target.ingress .sg_image:after {
    background-position: -9px -37px
}

#uoscloudsecurity .detailView .settings .slide-target .tab {
    float: left;
    border-top-left-radius: 0px;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 2px;
    background-color: #ecf0f2;
    color: #738293;
    font-size: 13px;
    padding: 8px 12px 7px;
    display: block
}

#uoscloudsecurity .detailView .settings .slide-target .tab[field="ingress"] {
    border-right: 1px solid #fff;
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 0
}

#uoscloudsecurity .detailView .settings .slide-target .tab:hover {
    background-color: #b9f1f9
}

#uoscloudsecurity .detailView .settings .slide-target .tab.selected {
    color: #252f3d;
    background-color: #5cd0e0
}

#uoscloudsecurity .detailView .settings .slide-target table {
    clear: both;
    position: relative;
    top: 13px
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow {
    height: 36px
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td {
    padding: 0
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version2,
#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version {
    width: 130px;
    position: relative
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version2 .tips,
#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version .tips {
    position: absolute;
    bottom: 41px;
    width: 300px;
    background-color: #f5fdfe;
    border: 1px solid #5cd0e0;
    border-radius: 5px;
    padding: 10px;
    line-height: 15px;
    display: none
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version2 .tips:before,
#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version .tips:before {
    display: block;
    content: "";
    position: absolute;
    left: 20px;
    bottom: -7px;
    width: 12px;
    height: 7px;
    background: url("/static/modules/apps/instance/i/icon-tooltips.png") 0 0 no-repeat;
    background-size: contain
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td:first-child .select {
    width: 90%;
    margin-right: 0
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version {
    width: 100%
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version input {
    width: 90%;
    margin-right: 0
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version2 {
    width: 100%
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version2>div {
    display: inline-block;
    width: 40%
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .port_version2>div input {
    width: 100%;
    margin-right: 0
}

#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .save,
#uoscloudsecurity .detailView .settings .slide-target table tbody tr.operationRow td .cancel {
    margin-top: 7px
}

i.image-icon-default {
    display: inline-block;
    background: url("/static/modules/apps/instance/i/images/icon_images_v6.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    background-size: 20px 482px;
    vertical-align: middle;
    margin: -1px 5px 0 0
}

i.image-icon-default:before {
    display: none
}

i.image-icon-default.ubuntu {
    background-position: 0 -42px
}

i.image-icon-default.windows {
    background-position: 0 -21px
}

i.image-icon-default.centos {
    background-position: 0 -231px
}

i.image-icon-default.ghost {
    background-position: 0 -63px
}

i.image-icon-default.osqa {
    background-position: 0 -84px
}

i.image-icon-default.redmine {
    background-position: 0 -105px
}

i.image-icon-default.moodle {
    background-position: 0 -126px
}

i.image-icon-default.gitlab {
    background-position: 0 -147px
}

i.image-icon-default.jenkins {
    background-position: 0 -168px
}

i.image-icon-default.owncloud {
    background-position: 0 -189px
}

i.image-icon-default.docker {
    background-position: 0 -210px
}

i.image-icon-default.openerp {
    background-position: 0 -252px
}

i.image-icon-default.couchdb {
    background-position: 0 -273px
}

i.image-icon-default.fedora {
    background-position: 0 -315px
}

i.image-icon-default.opensuse {
    background-position: 0 -336px
}

i.image-icon-default.debian {
    background-position: 0 -357px
}

i.image-icon-default.coreos {
    background-position: 0 -378px
}

i.image-icon-default.arch {
    background-position: 0 -294px
}

i.image-icon-default.freebsd {
    background-position: 0 -399px
}

i.image-icon-default.gentoo {
    background-position: 0 -420px
}

i.image-icon-default.dataman {
    background-position: 0 -441px
}

i.image-icon-default.atomic {
    background-position: 0 -462px
}

.appmodal .create-instance {
    width: 724px
}

.appmodal .create-instance.resizeModal .panel {
    height: auto
}

.appmodal .create-instance.resizeModal .panel .tipsRow {
    margin-left: 48px;
    margin-right: 48px;
    line-height: 26px;
    padding: 5px 12px;
    font-size: 12px;
    background-color: #fff7ea;
    border: 1px solid #ffcd7e;
    line-height: 20px;
    clear: both
}

.appmodal .create-instance.resizeModal .panel .tipsRow strong {
    color: #ffac2a
}

.appmodal .create-instance.resizeModal .panel .errorTips {
    margin-left: 48px;
    margin-right: 48px;
    border-radius: 2px;
    padding: 7px 12px;
    line-height: 20px;
    font-size: 12px;
    border: 1px solid #e05c69;
    background-color: #fff4f4;
    clear: both
}

.appmodal .create-instance.resizeModal .panel .billInfo {
    padding-right: 48px;
    text-align: right;
    font-size: 12px
}

.appmodal .create-instance.resizeModal .panel .billInfo .chargeValue {
    font-size: 18px;
    color: #f78913
}

.appmodal .create-instance.resizeModal .panel .billInfo .chargeMonth {
    margin-left: 15px;
    display: inline-block;
    font-size: 14px;
    color: #a8b3be
}

.appmodal .create-instance .number-controller {
    position: relative;
    display: inline-block
}

.appmodal .create-instance .number-controller:hover input {
    border: 1px solid #00afc8
}

.appmodal .create-instance .controller {
    position: absolute;
    right: 1px;
    top: 2px;
    width: 24px;
    bottom: 1px;
    background-color: #ecf0f2;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.appmodal .create-instance .controller .arrow-wrapper {
    position: relative;
    height: 15px;
    width: 24px;
    cursor: pointer
}

.appmodal .create-instance .controller .arrow-wrapper:hover {
    background-color: #e1e6e8
}

.appmodal .create-instance .controller .arrow-wrapper:hover .up {
    border-bottom-color: #657683
}

.appmodal .create-instance .controller .arrow-wrapper:hover .down {
    border-top-color: #657683
}

.appmodal .create-instance .controller .arrow-wrapper:active {
    background-color: #d6dde1
}

.appmodal .create-instance .controller .arrow-wrapper:active .up {
    border-bottom-color: #5d6d79
}

.appmodal .create-instance .controller .arrow-wrapper:active .down {
    border-top-color: #5d6d79
}

.appmodal .create-instance .controller .arrow-wrapper .up {
    position: absolute;
    display: block;
    margin-top: 5px;
    margin-left: 8px;
    width: 0;
    border-bottom: 6px solid #6c7f8d;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent
}

.appmodal .create-instance .controller .arrow-wrapper .down {
    position: absolute;
    display: block;
    margin-top: 5px;
    margin-left: 8px;
    width: 0;
    border-top: 6px solid #6c7f8d;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent
}

.appmodal .create-instance .hide2 {
    display: none
}

.appmodal .create-instance .tip {
    color: #a8b3be;
    padding-left: 5px
}

.appmodal .create-instance .slide-wrapper {
    position: relative;
    left: 0;
    width: 724px;
    height: 475px
}

.appmodal .create-instance .slide-wrapper.holder {
    height: 535px
}

.appmodal .create-instance .warn {
    color: #e05c69
}

.appmodal .create-instance .slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 724px
}

.appmodal .create-instance .slide:last-child {
    left: 724px
}

.appmodal .create-instance .slide.switchIn {
    animation: leftIn 300ms forwards;
    -moz-animation: leftIn 300ms forwards;
    -webkit-animation: leftIn 300ms forwards
}

.appmodal .create-instance .slide.switchOut {
    animation: leftOut 300ms forwards;
    -moz-animation: leftOut 300ms forwards;
    -webkit-animation: leftOut 300ms forwards
}

.appmodal .create-instance .panel {
    height: 400px;
    padding-left: 0;
    padding-right: 0
}

.appmodal .create-instance .quota {
    margin: 0 48px 24px 48px;
    height: 34px;
    line-height: 34px;
    padding-left: 12px;
    border: 1px solid #e05c69;
    background-color: #fff4f4;
    border-radius: 2px
}

.appmodal .create-instance .quota-holder {
    margin: 0 48px 24px 48px;
    height: 34px
}

.appmodal .create-instance input {
    width: 554px
}

.appmodal .create-instance label {
    text-align: right;
    width: 95px
}

.appmodal .create-instance label strong {
    color: red
}

.appmodal .create-instance .row>div:first-child {
    float: left;
    margin-right: 14px;
    width: 95px
}

.appmodal .create-instance .row>div:last-child {
    float: left;
    width: 590px
}

.appmodal .create-instance .row:not(:first-child) {
    margin-top: 16px
}

.appmodal .create-instance .btn-group>.btn {
    float: left;
    margin-right: 1px
}

.appmodal .create-instance .btn-group>.btn:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.appmodal .create-instance .btn-group>.btn:last-child {
    margin-right: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0
}

.appmodal .create-instance .btn-group>.btn:not(:first-child):not(:last-child) {
    border-radius: 0
}

.appmodal .create-instance .btn {
    display: inline-block;
    min-width: 80px;
    border: 1px solid transparent;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 10px;
    font-size: 12px;
    height: 34px;
    line-height: 34px;
    border-radius: 2px;
    color: #5b6775;
    background-color: #ecf0f2;
    border-color: #ecf0f2;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
}

.appmodal .create-instance .btn i {
    margin-right: 10px
}

.appmodal .create-instance .btn:hover {
    color: #5b6775;
    background-color: #b9f1f9;
    border-color: #b9f1f9
}

.appmodal .create-instance .btn.selected {
    color: #252f3d;
    background-color: #5cd0e0;
    border-color: #5cd0e0
}

.appmodal .create-instance .image-title .btn {
    width: 142px
}

.appmodal .create-instance .image-list {
    margin-top: 16px;
    max-height: 280px;
    overflow: auto
}

.appmodal .create-instance .image-list .btn {
    float: left;
    margin-right: 13px;
    margin-bottom: 10px;
    padding-left: 16px;
    height: 36px;
    line-height: 36px;
    width: 270px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis
}

.appmodal .create-instance .image-list .btn:nth-child(2n) {
    margin-right: 0
}

.appmodal .create-instance .no-image {
    float: left;
    height: 36px;
    color: #a8b3be
}

.appmodal .create-instance .flavor select {
    width: 304px
}

.appmodal .create-instance .flavor .cpu,
.appmodal .create-instance .flavor .ram {
    margin-top: 16px
}

.appmodal .create-instance .flavor .btn {
    width: 81px;
    margin-right: 13px
}

.appmodal .create-instance .flavor .btn:last-child {
    margin-right: 0px
}

.appmodal .create-instance .subnet .btn {
    width: 144px;
    margin-right: 13px
}

.appmodal .create-instance .subnet select {
    width: 244px
}

.appmodal .create-instance .login .btn {
    width: 144px;
    margin-right: 13px
}

.appmodal .create-instance .login input,
.appmodal .create-instance .login select {
    margin-left: 5px;
    width: 216px
}

.appmodal .create-instance .login input.error {
    border-color: #e05c69
}

.appmodal .create-instance .login .usr,
.appmodal .create-instance .login .pwd {
    position: relative;
    margin-top: 16px;
    height: 33px
}

.appmodal .create-instance .login .usr label,
.appmodal .create-instance .login .pwd label {
    width: 80px
}

.appmodal .create-instance .tips {
    position: absolute;
    bottom: 41px;
    left: 83px;
    width: 206px;
    background-color: #f5fdfe;
    border: 1px solid #5cd0e0;
    border-radius: 5px;
    padding: 10px;
    line-height: 15px;
    display: none;
    word-wrap: break-word
}

.appmodal .create-instance .tips:before {
    display: block;
    content: "";
    position: absolute;
    left: 20px;
    bottom: -7px;
    width: 12px;
    height: 7px;
    background: url("/static/modules/apps/instance/i/icon-tooltips.png") 0 0 no-repeat;
    background-size: contain
}

.appmodal .create-instance .tips.error {
    border: 1px solid #d2004a;
    background-color: #fce5e6
}

.appmodal .create-instance .tips.error:before {
    background: url("/static/modules/apps/instance/i/icon-tooltips-error.png") 0 0 no-repeat;
    background-size: contain
}

.appmodal .create-instance .number input {
    width: 144px
}

.appmodal .create-instance .price {
    padding-left: 20px
}

.appmodal .create-instance .price .unit {
    color: #f78913
}

.appmodal .create-instance .price .lg {
    font-size: 18px
}

.appmodal .create-instance .price .normal {
    padding-left: 17px;
    font-size: 14px;
    color: #a8b3be
}

@keyframes leftIn {
    from {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes leftIn {
    from {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-moz-keyframes leftIn {
    from {
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes leftOut {
    from {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@-webkit-keyframes leftOut {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@-moz-keyframes leftOut {
    from {
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

#create_ticket .panel {
    max-height: none
}

.attachment-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    text-align: center;
    z-index: 999
}

.attachment-modal img {
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s
}

.vmModal .attachment-wp {
    margin-left: 70px
}

.vmModal .attachment-wp .trigger-wp {
    margin-top: 12px
}

.vmModal .attachment-wp #J_sendAttach {
    float: left;
    display: block;
    width: 100px
}

.vmModal .attachment-wp #J_sendAttach .icon-attachment {
    background: url("/static/modules/apps/instance/i/icon-attachment.png") 0 0 no-repeat;
    background-size: 14px 14px;
    margin-right: 5px
}

.vmModal .attachment-wp .format-desc {
    float: left;
    width: 284px;
    color: #a8b3be
}

.vmModal textarea:hover+.attach-list-wp,
.vmModal textarea:focus+.attach-list-wp {
    border-left: 1px solid #00afc8;
    border-right: 1px solid #00afc8;
    border-bottom: 1px solid #00afc8
}

.vmModal .attach-list-wp {
    margin-top: -2px;
    border-left: 1px solid #e2e7ea;
    border-right: 1px solid #e2e7ea;
    border-bottom: 1px solid #e2e7ea;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px
}

.vmModal .attach-list-wp:empty {
    display: none
}

.vmModal .attach-list-wp .attach-list {
    height: 43px;
    background-color: #f1f5f7;
    border-bottom: 1px solid #fff
}

.vmModal .attach-list-wp .attach-list:last-child {
    border-bottom: none
}

.vmModal .attach-list-wp .attach-list .thumbnail {
    float: left;
    margin-top: 6px;
    margin-left: 10px;
    margin-right: 10px;
    width: 44px;
    height: 30px;
    background-color: #fff;
    overflow: hidden
}

.vmModal .attach-list-wp .attach-list .thumbnail.txt {
    background: #fff url(/static/modules/apps/instance/i/icon-txt.png) center center no-repeat;
    background-size: 22px 28px
}

.vmModal .attach-list-wp .attach-list .thumbnail .error {
    display: inline-block;
    margin-top: 8px;
    margin-left: 15px;
    width: 15px;
    height: 15px;
    background: url(/static/modules/apps/instance/i/icon-status.png) 0 -45px no-repeat;
    background-size: 15px 90px;
    border: none
}

.vmModal .attach-list-wp .attach-list .thumbnail .load {
    position: relative;
    display: inline-block;
    margin-top: 6px;
    margin-left: 12px;
    width: 20px;
    height: 20px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat;
    background-size: 20px 20px;
    border: none
}

.vmModal .attach-list-wp .attach-list .thumbnail .load:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

.vmModal .attach-list-wp .attach-list .con {
    float: left;
    width: 280px;
    height: 43px
}

.vmModal .attach-list-wp .attach-list .con .name {
    float: left;
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 44px;
    padding-top: 0 !important
}

.vmModal .attach-list-wp .attach-list .con .size {
    float: left;
    line-height: 44px;
    color: #a8b3be;
    padding-left: 10px
}

.vmModal .attach-list-wp .attach-list .con .error {
    max-width: 300px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 44px;
    color: #dc5565;
    border: none
}

.vmModal .attach-list-wp .attach-list .del {
    float: left;
    width: 30px
}

.vmModal .attach-list-wp .attach-list .del span {
    display: block;
    margin-top: 14px;
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 67px
}

.vmModal .attach-list-wp .attach-list .del span:hover {
    background-position: 0 -17px
}

#J_metric {
    position: fixed;
    left: 215px;
    right: 20px;
    top: 60px;
    bottom: 20px;
    height: auto
}

@media screen and (min-width:1680px) {
    #J_metric {
        left: 280px
    }
}

.metric-con {
    position: absolute;
    top: 58px;
    left: 0;
    bottom: 0;
    right: 0
}

.metric-con .metric-wp {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0
}

.metric-con .btn {
    display: inline-block;
    min-width: 80px;
    border: 1px solid transparent;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 10px;
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #00afc8;
    border-color: #00afc8;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.metric-con .btn.disabled .i-filter {
    background-position: -20px 0
}

.metric-con .btn.disabled .i-create {
    background-position: 1px -24px
}

.metric-con .btn.unfold .i-filter {
    background-position: -40px 0
}

.metric-con .btn .i-filter {
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 7px;
    height: 16px;
    width: 16px;
    background: url("/static/modules/apps/instance/i/icon-filter.png") 0 0 no-repeat;
    background-size: 75px 15px
}

.metric-con .btn .i-create {
    display: inline-block;
    position: relative;
    top: 3px;
    margin-right: 7px;
    height: 16px;
    width: 16px;
    background: url("/static/modules/apps/instance/i/icon-buttons-v2.png") 1px 1px no-repeat;
    background-size: 555px 40px
}

.metric-con .btn:hover {
    color: #ffffff;
    background-color: #00a5bd;
    border-color: #00a5bd
}

.metric-con .btn:active {
    color: #ffffff;
    background-color: #009bb1
}

.metric-con .btn[disabled],
.metric-con .btn.disabled {
    color: #a8b3be;
    background-color: #d9e3e5;
    border-color: #d9e3e5;
    cursor: not-allowed
}

.metric-con .btn[disabled]:hover,
.metric-con .btn.disabled:hover {
    color: #a8b3be;
    background-color: #d9e3e5;
    border-color: #d9e3e5
}

.metric-con .btn[disabled]:active,
.metric-con .btn.disabled:active {
    color: #a8b3be;
    background-color: #d9e3e5
}

.metric-con .btn-create {
    color: #ffffff;
    background-color: #1eb9a5;
    border-color: #1eb9a5
}

.metric-con .btn-create:hover {
    color: #ffffff;
    background-color: #09b29c;
    border-color: #09b29c
}

.metric-con .btn-create:active {
    color: #ffffff;
    background-color: #00a993
}

.metric-con .btn-status {
    height: 30px;
    line-height: 30px;
    color: #738293;
    background-color: #ecf0f2;
    border-color: #ecf0f2
}

.metric-con .btn-status:hover,
.metric-con .btn-status:active {
    color: #738293;
    background-color: #b9f1f9;
    border-color: #b9f1f9
}

.metric-con .btn-status.selected {
    color: #252f3d;
    background-color: #5cd0e0;
    border-color: #5cd0e0
}

.metric-con .btn-del {
    color: #ffffff;
    background-color: #e05c69;
    border-color: #e05c69
}

.metric-con .btn-del:hover {
    color: #ffffff;
    background-color: #d6505c;
    border-color: #d6505c
}

.metric-con .btn-del:active {
    color: #ffffff;
    background-color: #cd4855
}

.metric-con .btn-group {
    display: inline-block
}

.metric-con .btn-group>.btn {
    float: left;
    margin-right: 1px
}

.metric-con .btn-group>.btn:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.metric-con .btn-group>.btn:last-child {
    margin-right: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0
}

.metric-con .btn-group>.btn:not(:first-child):not(:last-child) {
    border-radius: 0
}

.metric-con .metric-l {
    position: relative;
    width: 40%;
    height: 100%;
    float: left
}

.metric-con .metric-l .no-data {
    margin-top: 20px;
    text-align: center
}

.metric-con .metric-l .loading {
    display: block;
    position: absolute;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    left: 50%;
    top: 180px;
    z-index: 990
}

.metric-con .metric-l .loading .spinInner {
    position: static;
    background: transparent url("/static/modules/apps/instance/i/icon-loading4.png") center center no-repeat;
    content: "";
    width: 48px;
    height: 48px;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .metric-con .metric-l .loading .spinInner {
        background: transparent url("/static/modules/apps/instance/i/icon-loading4@2x.png") center center no-repeat;
        background-size: 48px 48px
    }
}

.metric-con .metric-l .loading:after {
    background: transparent url("/static/modules/apps/instance/i/icon-loading3.png") center center no-repeat;
    content: "";
    width: 48px;
    height: 48px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 24px;
    top: 24px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .metric-con .metric-l .loading:after {
        background: transparent url("/static/modules/apps/instance/i/icon-loading3@2x.png") center center no-repeat;
        background-size: 48px 48px
    }
}

.metric-con .metric-l .filter {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    height: 34px;
    min-height: 34px;
    max-height: 34px
}

.metric-con .metric-l .filter .filter-btn {
    margin-right: 10px;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 80px;
    min-width: 80px;
    max-width: 80px
}

.metric-con .metric-l .filter .search {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: absolute;
    height: 32px;
    line-height: 32px;
    position: relative
}

.metric-con .metric-l .filter .search form {
    margin: 0
}

.metric-con .metric-l .filter .search form input {
    width: 120px;
    padding: 0 30px 0 10px
}

.metric-con .metric-l .filter .search form input:hover,
.metric-con .metric-l .filter .search form input:focus {
    border-color: #00afc8
}

.metric-con .metric-l .filter .search a {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 1px;
    right: 0;
    background: url(/static/public/img/icon-search.png) center center no-repeat;
    background-size: 12px auto;
    cursor: pointer
}

.metric-con .metric-l .filter .search input {
    width: 100% !important;
    padding-right: 30px
}

.metric-con .metric-l .table-header {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 20px 20px 0 20px;
    overflow: hidden
}

.metric-con .metric-l .table-header>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    padding-left: 16px;
    background-color: #ecf0f2;
    color: #626f7e;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    border-right: 1px solid #fff;
    font-size: 12px;
    white-space: nowrap
}

.metric-con .metric-l .table-header>div:last-child {
    border-right: none
}

.metric-con .metric-l .table-header .status .selectWp {
    position: relative;
    display: inline-block;
    line-height: 28px
}

.metric-con .metric-l .table-header .status .selectWp:hover .selectLabel {
    background-position: 0 -21px
}

.metric-con .metric-l .table-header .status .selectLabel {
    position: relative;
    top: 2px;
    margin-left: 8px;
    display: inline-block;
    width: 19px;
    height: 13px;
    background: url(/static/public/img/table_arrow.png) 0 0 no-repeat
}

.metric-con .metric-l .table-header .status select {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    opacity: 0
}

.metric-con .metric-l .table {
    margin: 0 20px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.metric-con .metric-l .table .table-content {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-height: 410px;
    overflow-y: auto;
    overflow-x: hidden
}

.metric-con .metric-l .table .table-content i {
    margin-right: 5px !important;
    margin-top: -2px
}

.metric-con .metric-l .table .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    border-bottom: 1px solid #e7ebed;
    white-space: nowrap;
    font-size: 12px
}

.metric-con .metric-l .table .row:hover {
    background-color: #e1f4f7
}

.metric-con .metric-l .table .row.selected {
    background-color: #b9f1f9
}

.metric-con .metric-l .table .row .status {
    text-transform: capitalize
}

.metric-con .metric-l .table .row a.disabled {
    color: #738293;
    cursor: not-allowed
}

.metric-con .metric-l .table .row a.disabled:hover {
    color: #738293
}

.metric-con .metric-l .table .row a.disabled:active {
    color: #738293
}

.metric-con .metric-l .table .row>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    font-size: 12px;
    color: #252f3d;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.metric-con .metric-l .table .row>div:last-child {
    border-right: none
}

.metric-con .metric-l .table .row .num {
    font-weight: bold;
    color: #f78913
}

.metric-con .metric-l .table .row .price {
    font-weight: bold;
    color: #1eb9a5
}

.metric-con .metric-l .table-header {
    margin: 10px 0 0 0
}

.metric-con .metric-l .table {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 80px;
    margin: 0
}

.metric-con .metric-l .table .table-content {
    max-height: none
}

.metric-con .metric-l .row {
    cursor: pointer
}

.metric-con .metric-r {
    float: left;
    width: 60%;
    height: 100%;
    padding-left: 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.metric-con .metric-r .btn-wp {
    margin-bottom: 10px;
    height: 34px;
    min-height: 34px;
    max-height: 34px
}

.metric-con .metric-r .chart-wp {
    position: relative;
    width: 100%;
    height: 290px;
    min-height: 290px;
    max-height: 290px;
    background-color: #f6fbfc;
    overflow: hidden
}

.metric-con .metric-r .chart-wp .default-page {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0
}

.metric-con .metric-r .chart-wp .default-page .title {
    margin-top: 46px;
    width: 100%;
    text-align: center;
    font-size: 24px;
    color: #b6c0c6;
    height: 32px;
    line-height: 32px
}

.metric-con .metric-r .chart-wp .default-page .arrow {
    display: inline-block;
    background: url(/static/modules/apps/instance/i/metric/arrow.png);
    width: 33px;
    height: 31px;
    vertical-align: middle
}

.metric-con .metric-r .chart-wp .default-page .img {
    width: 184px;
    height: 120px;
    background: url(/static/modules/apps/instance/i/metric/default_bg.png);
    margin: auto;
    margin-top: 46px
}

.metric-con .metric-r .chart-wp .J-alarm-chart {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    height: 290px;
    width: 100%
}

.metric-con .metric-r .chart-wp .J-alarm-chart.loadingData {
    position: relative
}

.metric-con .metric-r .chart-wp .J-alarm-chart.loadingData .highcharts-no-data {
    display: none
}

.metric-con .metric-r .chart-wp .J-alarm-chart.loadingData:before {
    display: block;
    position: absolute;
    background: transparent url("/static/modules/apps/instance/i/icon-loading4.png") center center no-repeat;
    background-size: 24px 24px;
    content: "";
    width: 24px;
    height: 24px;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
    opacity: 1;
    z-index: 2
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .metric-con .metric-r .chart-wp .J-alarm-chart.loadingData:before {
        background: transparent url("/static/modules/apps/instance/i/icon-loading4@2x.png") center center no-repeat;
        background-size: 24px 24px
    }
}

.metric-con .metric-r .chart-wp .J-alarm-chart.loadingData:after {
    position: absolute;
    background: transparent url("/static/modules/apps/instance/i/icon-loading3.png") center center no-repeat;
    background-size: 24px 24px;
    content: "";
    width: 24px;
    height: 24px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .metric-con .metric-r .chart-wp .J-alarm-chart.loadingData:after {
        background: transparent url("/static/modules/apps/instance/i/icon-loading3@2x.png") center center no-repeat;
        background-size: 24px 24px
    }
}

.metric-con .metric-r .time-wp {
    margin-top: 20px
}

.metric-con .metric-r .time-wp .date-wp {
    margin-top: 17px
}

.metric-con .metric-r .time-wp .date-wp>div:first-child {
    margin-bottom: 10px
}

.metric-con .metric-r .time-wp .date-wp input {
    width: 34px;
    padding-left: 8px;
    padding-right: 8px
}

.metric-con .metric-r .time-wp .date-wp .start {
    margin-right: 7px
}

.metric-con .metric-r .time-wp .date-wp .end {
    margin-left: 20px;
    margin-right: 7px
}

.metric-con .metric-r .time-wp .date-wp .start,
.metric-con .metric-r .time-wp .date-wp .end {
    display: inline-block;
    width: 30px;
    margin-left: 0 !important
}

.metric-con .metric-r .time-wp .date-wp .date {
    margin-right: 7px;
    width: 100px;
    color: #252f3d;
    background-color: transparent;
    cursor: default
}

.metric-con .metric-r .time-wp .date-wp .btn {
    margin-left: 7px;
    min-width: initial
}

.metric-con .metric-avg {
    float: left;
    position: relative;
    width: 50%;
    height: 100%
}

.metric-con .metric-avg:last-child {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 20px
}

.metric-con .metric-avg input,
.metric-con .metric-avg select {
    margin-left: 5px
}

.metric-con .metric-avg .input-l {
    width: 317px
}

.metric-con .metric-avg .input-cons {
    width: 60px;
    margin-right: 5px
}

.metric-con .metric-avg .input-thres {
    width: 60px
}

.metric-con .metric-avg .info {
    margin-top: 10px;
    color: #a8b3be;
    line-height: 20px
}

.metric-con .metric-avg .info.statistic {
    padding-left: 74px
}

.metric-con .metric-avg .info strong {
    color: #1eb9a5;
    font-weight: normal
}

.metric-con .metric-avg .alarm-pre {
    height: 263px;
    width: 100%;
    background-color: #f6fbfc;
    overflow: hidden
}

.metric-con .metric-avg .tip {
    margin-top: 20px;
    font-size: 14px
}

.metric-con .metric-avg .tip .green {
    color: #1eb9a5
}

.metric-con .metric-avg .tip .red {
    color: #dc5565
}

.metric-con .metric-avg .period {
    margin-top: 14px
}

.metric-con .metric-avg .period input {
    width: 65px
}

.metric-con .metric-avg .period .r {
    float: right
}

.metric-con .metric-avg .select {
    width: 76px
}

.metric-con .metric-avg .select.statistic {
    width: 110px
}

.metric-con .metric-avg .title {
    font-size: 16px;
    margin-bottom: 20px
}

.metric-con .metric-avg .row {
    margin-bottom: 10px !important
}

.metric-con .metric-avg .row label {
    text-align: right
}

.metric-con .metric-avg .row strong {
    color: red
}

.metric-con .filter-drop {
    position: absolute;
    top: 32px;
    left: 0;
    padding: 20px;
    background-color: #fff;
    width: 500px;
    border: 1px solid #bdcad2;
    z-index: 998;
    color: #738293
}

.metric-con .filter-drop h6 {
    font-size: 14px;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #bdcad2
}

.metric-con .filter-drop h6 i {
    margin-top: -2px;
    margin-right: 10px !important
}

.metric-con .filter-drop input[type="checkbox"] {
    margin-right: 10px;
    margin-top: -1px
}

.metric-con .filter-drop li {
    margin-top: 8px;
    height: 16px;
    line-height: 16px;
    color: #252f3d
}

.metric-con .filter-drop .m>div {
    float: left;
    margin-right: 50px
}

.metric-con .filter-drop .s {
    margin-top: 20px;
    text-align: right
}

.metric-con .filter-drop .btn {
    min-width: initial;
    margin-right: 7px
}

.metric-con .filter-drop .btn-reset {
    color: #5b6775;
    background-color: #dfe4e6;
    border-color: #dfe4e6
}

.metric-con .filter-drop .btn-reset:hover {
    background-color: #d4dadc;
    border-color: #d4dadc
}

.metric-con .filter-drop .btn-reset:active {
    background-color: #c7cfd2;
    border-color: #c7cfd2
}

.create-alarm {
    width: 900px
}

.create-alarm .slide-wrapper {
    position: relative;
    left: 0;
    width: 900px;
    height: 519px
}

.create-alarm .slide-wrapper.over-limit {
    height: 555px
}

.create-alarm .slide-wrapper.over-limit .panel {
    height: 484px
}

.create-alarm .slide-wrapper.over-limit .panel .billInfo {
    bottom: 56px !important
}

.create-alarm .slide-wrapper .errorTips {
    position: absolute;
    bottom: 10px;
    border-radius: 2px;
    padding: 7px 12px;
    line-height: 20px;
    font-size: 12px;
    border: 1px solid #e05c69;
    background-color: #fff4f4;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.create-alarm .slide-wrapper .metric-nav {
    position: relative;
    top: 18px;
    z-index: 99;
    text-align: center
}

.create-alarm .slide-wrapper .metric-nav ol {
    display: inline-block;
    margin: auto;
    padding: 0
}

.create-alarm .slide-wrapper .metric-nav li {
    float: left;
    position: relative;
    text-align: center;
    width: 190px
}

.create-alarm .slide-wrapper .metric-nav li:last-child {
    margin-right: 0
}

.create-alarm .slide-wrapper .metric-nav li:last-child .delimiter {
    left: 0
}

.create-alarm .slide-wrapper .metric-nav li:not(:last-child):not(:first-child) .delimiter {
    width: 100%
}

.create-alarm .slide-wrapper .metric-nav li span {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #ecf0f2;
    background-color: #ccd6dc;
    z-index: 9
}

.create-alarm .slide-wrapper .metric-nav li .delimiter {
    position: absolute;
    top: 10px;
    right: 0;
    width: 50%;
    height: 2px;
    background-color: #ccd6dc;
    z-index: 8
}

.create-alarm .slide-wrapper .metric-nav li.selected span {
    border: 3px solid #ecf0f2;
    background-color: #09b29c
}

.create-alarm .slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 900px
}

.create-alarm .slide.slide-prev {
    left: -900px
}

.create-alarm .slide.slide-prev2 {
    left: -1800px
}

.create-alarm .slide.slide-next {
    left: 900px
}

.create-alarm .slide.slide-next2 {
    left: 1800px
}

.create-alarm .slide.move1 {
    animation: move1 300ms forwards;
    -moz-animation: move1 300ms forwards;
    -webkit-animation: move1 300ms forwards
}

.create-alarm .slide.move2 {
    animation: move2 300ms forwards;
    -moz-animation: move2 300ms forwards;
    -webkit-animation: move2 300ms forwards
}

.create-alarm .slide.move3 {
    animation: move3 300ms forwards;
    -moz-animation: move3 300ms forwards;
    -webkit-animation: move3 300ms forwards
}

.create-alarm .slide.move4 {
    animation: move4 300ms forwards;
    -moz-animation: move4 300ms forwards;
    -webkit-animation: move4 300ms forwards
}

.create-alarm .slide.move5 {
    animation: move5 300ms forwards;
    -moz-animation: move5 300ms forwards;
    -webkit-animation: move5 300ms forwards
}

.create-alarm .slide.move6 {
    animation: move6 300ms forwards;
    -moz-animation: move6 300ms forwards;
    -webkit-animation: move6 300ms forwards
}

.create-alarm .slide .back {
    margin-right: 652px !important
}

.create-alarm .panel {
    position: relative;
    height: 448px;
    padding: 0;
    margin: 21px 48px 0 48px
}

.create-alarm .panel .metric-con .noti-list {
    max-height: 300px;
    overflow: auto
}

.create-alarm .panel .metric-con .noti-list li {
    height: 41px;
    background-color: #ecf0f2;
    margin-bottom: 10px;
    padding-top: 11px;
    padding-left: 20px
}

.create-alarm .panel .metric-con .noti-list li span {
    padding: 0 5px
}

.create-alarm .panel .metric-con .noti-list li select {
    width: 160px;
    background-color: #fff
}

.create-alarm .panel .metric-con .noti-list li .create-noti {
    margin-left: 15px
}

.create-alarm .panel .metric-con .noti-list li .delete {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/static/modules/apps/instance/i/icon-delete.png") 0 0 no-repeat;
    background-size: 40px 16px;
    float: right;
    margin-right: 20px;
    margin-top: 7px
}

.create-alarm .panel .metric-con .noti-list li .delete:hover {
    background-position: -24px 0
}

.create-alarm .panel .metric-con .noti-add {
    margin-top: 10px
}

.create-alarm .panel .metric-con .add-noti {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 bottom no-repeat;
    background-size: 16px 67px;
    cursor: pointer
}

.create-alarm .panel .metric-con .billInfo {
    position: absolute;
    bottom: 20px;
    right: 0
}

.create-alarm .panel .metric-con .chargeValue {
    font-size: 18px;
    color: #f78913
}

.create-alarm .panel .metric-con .chargeMonth {
    margin-left: 15px;
    display: inline-block;
    font-size: 14px;
    color: #a8b3be
}

.create-alarm .panel .row {
    margin: 0
}

@keyframes move1 {
    from {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        transform: translateX(-200%)
    }
}

@-webkit-keyframes move1 {
    from {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%)
    }
}

@-moz-keyframes move1 {
    from {
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -moz-transform: translateX(-200%);
        transform: translateX(-200%)
    }
}

@keyframes move2 {
    from {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@-webkit-keyframes move2 {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@-moz-keyframes move2 {
    from {
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes move3 {
    from {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes move3 {
    from {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-moz-keyframes move3 {
    from {
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    to {
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes move4 {
    from {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@-webkit-keyframes move4 {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@-moz-keyframes move4 {
    from {
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -moz-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@keyframes move5 {
    to {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    from {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@-webkit-keyframes move5 {
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    from {
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@-moz-keyframes move5 {
    to {
        -moz-transform: translateX(0);
        transform: translateX(0)
    }
    from {
        -moz-transform: translateX(100%);
        transform: translateX(100%)
    }
}

@keyframes move6 {
    from {
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        transform: translateX(-200%)
    }
    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@-webkit-keyframes move6 {
    from {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%)
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@-moz-keyframes move6 {
    from {
        -moz-transform: translateX(-200%);
        transform: translateX(-200%)
    }
    to {
        -moz-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

#uoscloudalarm .detailView .panel .table .table-header {
    border-right: 1px solid #fff;
    background-color: #ecf0f2;
    color: #626f7e;
    font-size: 12px;
    height: 36px
}

#uoscloudalarm .detailView .panel .table .table-row {
    height: 36px
}

#uoscloudalarm .detailView .panel .notification-list tr {
    height: 40px
}

#uoscloudcombo-alarm .detailView .panel .table .table-header {
    border-right: 1px solid #fff;
    background-color: #ecf0f2;
    color: #626f7e;
    font-size: 12px;
    height: 36px
}

#uoscloudcombo-alarm .detailView .panel .table .table-row {
    height: 36px
}

#uoscloudcombo-alarm .detailView .panel .resource-list tr,
#uoscloudcombo-alarm .detailView .panel .notification-list tr {
    height: 40px
}

.vmModal.create-comnbo-alarm .metric-con {
    top: 0
}

.vmModal.create-comnbo-alarm .metric-con .table-header {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 20px 20px 0 20px;
    overflow: hidden
}

.vmModal.create-comnbo-alarm .metric-con .table-header>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    padding-left: 16px;
    background-color: #ecf0f2;
    color: #626f7e;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    border-right: 1px solid #fff;
    font-size: 12px;
    white-space: nowrap
}

.vmModal.create-comnbo-alarm .metric-con .table-header>div:last-child {
    border-right: none
}

.vmModal.create-comnbo-alarm .metric-con .table-header .status .selectWp {
    position: relative;
    display: inline-block;
    line-height: 28px
}

.vmModal.create-comnbo-alarm .metric-con .table-header .status .selectWp:hover .selectLabel {
    background-position: 0 -21px
}

.vmModal.create-comnbo-alarm .metric-con .table-header .status .selectLabel {
    position: relative;
    top: 2px;
    margin-left: 8px;
    display: inline-block;
    width: 19px;
    height: 13px;
    background: url(/static/public/img/table_arrow.png) 0 0 no-repeat
}

.vmModal.create-comnbo-alarm .metric-con .table-header .status select {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    opacity: 0
}

.vmModal.create-comnbo-alarm .metric-con .table {
    margin: 0 20px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.vmModal.create-comnbo-alarm .metric-con .table .table-content {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-height: 410px;
    overflow-y: auto;
    overflow-x: hidden
}

.vmModal.create-comnbo-alarm .metric-con .table .table-content i {
    margin-right: 5px !important;
    margin-top: -2px
}

.vmModal.create-comnbo-alarm .metric-con .table .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    border-bottom: 1px solid #e7ebed;
    white-space: nowrap;
    font-size: 12px
}

.vmModal.create-comnbo-alarm .metric-con .table .row:hover {
    background-color: #e1f4f7
}

.vmModal.create-comnbo-alarm .metric-con .table .row.selected {
    background-color: #b9f1f9
}

.vmModal.create-comnbo-alarm .metric-con .table .row .status {
    text-transform: capitalize
}

.vmModal.create-comnbo-alarm .metric-con .table .row a.disabled {
    color: #738293;
    cursor: not-allowed
}

.vmModal.create-comnbo-alarm .metric-con .table .row a.disabled:hover {
    color: #738293
}

.vmModal.create-comnbo-alarm .metric-con .table .row a.disabled:active {
    color: #738293
}

.vmModal.create-comnbo-alarm .metric-con .table .row>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    font-size: 12px;
    color: #252f3d;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.vmModal.create-comnbo-alarm .metric-con .table .row>div:last-child {
    border-right: none
}

.vmModal.create-comnbo-alarm .metric-con .table .row .num {
    font-weight: bold;
    color: #f78913
}

.vmModal.create-comnbo-alarm .metric-con .table .row .price {
    font-weight: bold;
    color: #1eb9a5
}

.vmModal.create-comnbo-alarm .metric-con .table,
.vmModal.create-comnbo-alarm .metric-con .table-header {
    margin: 0
}

.vmModal.create-comnbo-alarm .metric-con .table-header {
    margin-top: 8px
}

.vmModal.create-comnbo-alarm .metric-con .table-header>div:first-child {
    width: 35px;
    min-width: 35px;
    max-width: 35px
}

.vmModal.create-comnbo-alarm .metric-con .table-header>div:nth-child(2) {
    width: 140px;
    min-width: 140px;
    max-width: 140px
}

.vmModal.create-comnbo-alarm .metric-con .table-header>div:nth-child(3) {
    width: 140px;
    min-width: 140px;
    max-width: 140px
}

.vmModal.create-comnbo-alarm .metric-con .table-header>div:nth-child(5) {
    width: 163px;
    min-width: 163px;
    max-width: 163px
}

.vmModal.create-comnbo-alarm .metric-con .table {
    height: 240px;
    max-height: 240px
}

.vmModal.create-comnbo-alarm .metric-con .table .row>div:first-child {
    width: 35px;
    min-width: 35px;
    max-width: 35px
}

.vmModal.create-comnbo-alarm .metric-con .table .row>div:nth-child(2) {
    width: 140px;
    min-width: 140px;
    max-width: 140px
}

.vmModal.create-comnbo-alarm .metric-con .table .row>div:nth-child(3) {
    width: 140px;
    min-width: 140px;
    max-width: 140px
}

.vmModal.create-comnbo-alarm .metric-con .table .row>div:nth-child(5) {
    width: 163px;
    min-width: 163px;
    max-width: 163px
}

.vmModal.create-comnbo-alarm .metric-con .trigger {
    margin-top: 20px
}

.vmModal.create-comnbo-alarm .metric-con .trigger label {
    text-align: right
}

.vmModal.create-comnbo-alarm .metric-con .trigger select {
    margin-right: 6px;
    width: 210px
}

.vmModal.create-comnbo-alarm .metric-con .name {
    margin-top: 20px
}

.vmModal.create-comnbo-alarm .metric-con .name label {
    text-align: right
}

.vmModal.create-comnbo-alarm .metric-con .name label strong {
    color: red
}

.vmModal.create-comnbo-alarm .metric-con .name input {
    width: 210px
}

.vmModal.create-comnbo-alarm .slide-wrapper {
    -o-transition: left 300ms;
    -ms-transition: left 300ms;
    -moz-transition: left 300ms;
    transition: left 300ms;
    -webkit-transition: left 300ms
}

.vmModal.create-comnbo-alarm .no-data {
    margin-top: 20px;
    text-align: center
}

.notification-pop.vmModal.narrow .panel {
    max-height: none
}

.vmModal .row.terminal .flex-row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.vmModal .row.terminal .flex-row>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.vmModal .row.terminal .flex-row>div:last-child {
    width: 64px;
    min-width: 64px;
    max-width: 64px
}

.vmModal .row.terminal .flex-row .input-network {
    width: 100%
}

.vmModal .row.terminal .flex-row .network {
    padding-left: 10px
}

.vmModal .row.terminal .flex-row .del {
    margin-left: 5px
}

.vmModal .row.terminal .terminal-row {
    margin-top: 10px;
    height: 34px;
    overflow: hidden;
    font-size: 0px
}

.vmModal .row.terminal .terminal-list {
    border-top: 1px solid transparent;
    border-bottom: 1px solid #e2e7ea;
    height: 32px
}

.vmModal .row.terminal .terminal-list span {
    display: inline-block
}

.vmModal .row.terminal .type {
    width: 76px;
    padding-left: 12px
}

.vmModal .row.terminal .protocal {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle
}

.vmModal .row.terminal .input-area {
    margin-left: 8px;
    width: 100px
}

.vmModal .row.terminal .input-number {
    margin-left: 8px;
    width: 128px
}

.vmModal .row.terminal .timer,
.vmModal .row.terminal .verified {
    width: 103px;
    margin-left: 8px;
    color: #a8b3be
}

.vmModal .row.terminal .verified {
    color: #1eb9a5
}

.vmModal .row.terminal .resend {
    position: relative;
    margin-left: 93px;
    top: 4px;
    left: 0;
    display: inline-block;
    width: 18px;
    height: 16px;
    background: url("/static/modules/apps/instance/i/icon-notification@2x.png") 0 1px no-repeat;
    background-size: 16px 76px;
    cursor: pointer
}

.vmModal .row.terminal .resend:hover {
    background-position: 0 -18px
}

.vmModal .row.terminal .resend.sms {
    background-position: 0 -38px
}

.vmModal .row.terminal .resend.sms:hover {
    background-position: 0 -60px
}

.vmModal .row.terminal input.input-email {
    width: 236px;
    margin-left: 8px
}

.vmModal .row.terminal .add {
    display: inline-block;
    margin-left: 12px;
    width: 52px;
    border: 1px solid transparent;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 0;
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    background-color: #00afc8;
    border-color: #00afc8
}

.vmModal .row.terminal .add:hover {
    color: #fff;
    background-color: #00a5bd;
    border-color: #00a5bd
}

.vmModal .row.terminal .del {
    position: relative;
    top: 4px;
    left: 6px;
    display: inline-block;
    width: 18px;
    height: 16px;
    background: url("/static/modules/apps/instance/i/icon-add-remove.png") 0 0 no-repeat;
    background-size: 184px 16px;
    cursor: pointer
}

.vmModal .row.terminal .del:hover {
    background-position: -48px 0
}

.instanceApp .vmPage .loadbalance-detail .btnList li a:after,
.instanceApp .vmPage .loadbalance-detail .moreActions a:after {
    display: none
}

.instanceApp .vmPage .loadbalance-detail .btnList li a,
.instanceApp .vmPage .loadbalance-detail .moreActions a {
    padding-left: 12px !important;
    font-size: 12px
}

.instanceApp .vmPage .loadbalance-detail .listener-wp {
    position: relative;
    margin-bottom: 40px;
    clear: both
}

.instanceApp .vmPage .loadbalance-detail .listener-wp .no-policy {
    color: #a8b3be;
    padding-top: 12px;
    text-align: center;
    font-size: 12px
}

.instanceApp .vmPage .loadbalance-detail .table-header {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 20px 20px 0 20px;
    overflow: hidden
}

.instanceApp .vmPage .loadbalance-detail .table-header>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    padding-left: 16px;
    background-color: #ecf0f2;
    color: #626f7e;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    border-right: 1px solid #fff;
    font-size: 12px;
    white-space: nowrap
}

.instanceApp .vmPage .loadbalance-detail .table-header>div:last-child {
    border-right: none
}

.instanceApp .vmPage .loadbalance-detail .table-header .status .selectWp {
    position: relative;
    display: inline-block;
    line-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .table-header .status .selectWp:hover .selectLabel {
    background-position: 0 -21px
}

.instanceApp .vmPage .loadbalance-detail .table-header .status .selectLabel {
    position: relative;
    top: 2px;
    margin-left: 8px;
    display: inline-block;
    width: 19px;
    height: 13px;
    background: url(/static/public/img/table_arrow.png) 0 0 no-repeat
}

.instanceApp .vmPage .loadbalance-detail .table-header .status select {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    opacity: 0
}

.instanceApp .vmPage .loadbalance-detail .table {
    margin: 0 20px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.instanceApp .vmPage .loadbalance-detail .table .table-content {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-height: 410px;
    overflow-y: auto;
    overflow-x: hidden
}

.instanceApp .vmPage .loadbalance-detail .table .table-content i {
    margin-right: 5px !important;
    margin-top: -2px
}

.instanceApp .vmPage .loadbalance-detail .table .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    border-bottom: 1px solid #e7ebed;
    white-space: nowrap;
    font-size: 12px
}

.instanceApp .vmPage .loadbalance-detail .table .row:hover {
    background-color: #e1f4f7
}

.instanceApp .vmPage .loadbalance-detail .table .row.selected {
    background-color: #b9f1f9
}

.instanceApp .vmPage .loadbalance-detail .table .row .status {
    text-transform: capitalize
}

.instanceApp .vmPage .loadbalance-detail .table .row a.disabled {
    color: #738293;
    cursor: not-allowed
}

.instanceApp .vmPage .loadbalance-detail .table .row a.disabled:hover {
    color: #738293
}

.instanceApp .vmPage .loadbalance-detail .table .row a.disabled:active {
    color: #738293
}

.instanceApp .vmPage .loadbalance-detail .table .row>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    font-size: 12px;
    color: #252f3d;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.instanceApp .vmPage .loadbalance-detail .table .row>div:last-child {
    border-right: none
}

.instanceApp .vmPage .loadbalance-detail .table .row .num {
    font-weight: bold;
    color: #f78913
}

.instanceApp .vmPage .loadbalance-detail .table .row .price {
    font-weight: bold;
    color: #1eb9a5
}

.instanceApp .vmPage .loadbalance-detail .table-header,
.instanceApp .vmPage .loadbalance-detail .table {
    margin: 0;
    border-bottom: none!important
}

.instanceApp .vmPage .loadbalance-detail .table-header .row,
.instanceApp .vmPage .loadbalance-detail .table .row {
    padding-left: 0!important
}

.instanceApp .vmPage .loadbalance-detail .table-header .checkbox,
.instanceApp .vmPage .loadbalance-detail .table .checkbox {
    width: 30px;
    min-width: 30px;
    max-width: 30px
}

.instanceApp .vmPage .loadbalance-detail .table .action-delete {
    position: relative;
    top: 3px;
    display: inline-block;
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 67px
}

.instanceApp .vmPage .loadbalance-detail .table .action-delete:hover {
    background-position: 0 -17px
}

.instanceApp .vmPage .loadbalance-detail .table {
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.instanceApp .vmPage .loadbalance-detail .table .table-content i {
    top: 0
}

.instanceApp .vmPage .loadbalance-detail .detailMoreActionDropDown {
    top: 32px
}

.instanceApp .vmPage .loadbalance-detail .policyMoreActionDropDown {
    top: 135px
}

.instanceApp .vmPage .loadbalance-detail input[type="checkbox"] {
    margin-top: 0
}

.instanceApp .vmPage .loadbalance-detail .pageHeader .btnList li a {
    line-height: 30px;
    min-height: 30px
}

.instanceApp .vmPage .loadbalance-detail .pageHeader .btnList li a[field="delete"] {
    margin-right: 0
}

.instanceApp .vmPage .loadbalance-detail .listener-header .listener-info-detail {
    padding-top: 6px
}

.instanceApp .vmPage .loadbalance-detail .listener-header .listener-info-detail .row>div {
    padding-left: 0;
    padding-right: 10px;
    line-height: 28px;
    height: 28px;
    color: #738293;
    font-size: 12px
}

.instanceApp .vmPage .loadbalance-detail .listener-header .listener-info-detail .row:hover {
    background-color: #fff
}

.instanceApp .vmPage .loadbalance-detail .listener-header .pageHeader {
    border-bottom: 1px solid #e7ebed;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-right: 0;
    line-height: 28px;
    min-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-header .title {
    font-size: 16px;
    font-weight: bold
}

.instanceApp .vmPage .loadbalance-detail .listener-header .btnList {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-header .btnList li {
    float: right
}

.instanceApp .vmPage .loadbalance-detail .listener-header .btnList li a {
    line-height: 28px;
    min-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-header .btnList li a:after {
    top: 5px
}

.instanceApp .vmPage .loadbalance-detail .listener-header .moreActions {
    line-height: 28px;
    min-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-header .moreActions .more_actions {
    margin-right: 0;
    height: 28px;
    line-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-header .moreActions .more_actions:after {
    top: 5px
}

.instanceApp .vmPage .loadbalance-detail .listener-header .row {
    border-bottom: none
}

.instanceApp .vmPage .loadbalance-detail .listener-header .detailMoreActionDropDown {
    right: 0;
    left: auto
}

.instanceApp .vmPage .loadbalance-detail .listener-bd {
    line-height: 28px;
    min-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-bd .pageHeader {
    line-height: 28px;
    min-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-bd .btnList {
    line-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-bd .btnList li a {
    line-height: 28px;
    min-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-bd .btnList li a:after {
    top: 5px
}

.instanceApp .vmPage .loadbalance-detail .listener-bd .moreActions {
    line-height: 28px;
    min-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-bd .moreActions .more_actions {
    height: 28px;
    line-height: 28px
}

.instanceApp .vmPage .loadbalance-detail .listener-bd .moreActions .more_actions:after {
    top: 5px
}

.vmModal .connect-row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.vmModal .connect-row .subnet-flex {
    width: 110px;
    min-width: 110px;
    max-width: 110px
}

.vmModal .connect-row .subnet-select {
    width: 100%
}

.vmModal .connect-row .btn {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-radius: 2px;
    color: #5b6775;
    background-color: #ecf0f2;
    width: 80px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer
}

.vmModal .connect-row .btn:last-child {
    margin-right: 0
}

.vmModal .connect-row .btn:hover {
    background-color: #b9f1f9
}

.vmModal .connect-row .btn.selected {
    color: #252f3d;
    background-color: #5cd0e0
}

.vmModal .connect-row .btn.xl {
    width: 100px
}

.vmModal.create-rule {
    width: 700px!important
}

.vmModal.create-rule .table-header {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 20px 20px 0 20px;
    overflow: hidden
}

.vmModal.create-rule .table-header>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    padding-left: 16px;
    background-color: #ecf0f2;
    color: #626f7e;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    border-right: 1px solid #fff;
    font-size: 12px;
    white-space: nowrap
}

.vmModal.create-rule .table-header>div:last-child {
    border-right: none
}

.vmModal.create-rule .table-header .status .selectWp {
    position: relative;
    display: inline-block;
    line-height: 28px
}

.vmModal.create-rule .table-header .status .selectWp:hover .selectLabel {
    background-position: 0 -21px
}

.vmModal.create-rule .table-header .status .selectLabel {
    position: relative;
    top: 2px;
    margin-left: 8px;
    display: inline-block;
    width: 19px;
    height: 13px;
    background: url(/static/public/img/table_arrow.png) 0 0 no-repeat
}

.vmModal.create-rule .table-header .status select {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    opacity: 0
}

.vmModal.create-rule .table {
    margin: 0 20px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.vmModal.create-rule .table .table-content {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-height: 410px;
    overflow-y: auto;
    overflow-x: hidden
}

.vmModal.create-rule .table .table-content i {
    margin-right: 5px !important;
    margin-top: -2px
}

.vmModal.create-rule .table .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    border-bottom: 1px solid #e7ebed;
    white-space: nowrap;
    font-size: 12px
}

.vmModal.create-rule .table .row:hover {
    background-color: #e1f4f7
}

.vmModal.create-rule .table .row.selected {
    background-color: #b9f1f9
}

.vmModal.create-rule .table .row .status {
    text-transform: capitalize
}

.vmModal.create-rule .table .row a.disabled {
    color: #738293;
    cursor: not-allowed
}

.vmModal.create-rule .table .row a.disabled:hover {
    color: #738293
}

.vmModal.create-rule .table .row a.disabled:active {
    color: #738293
}

.vmModal.create-rule .table .row>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    font-size: 12px;
    color: #252f3d;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.vmModal.create-rule .table .row>div:last-child {
    border-right: none
}

.vmModal.create-rule .table .row .num {
    font-weight: bold;
    color: #f78913
}

.vmModal.create-rule .table .row .price {
    font-weight: bold;
    color: #1eb9a5
}

.vmModal.create-rule .table-header,
.vmModal.create-rule .table {
    margin: 0
}

.vmModal.create-rule .no-rule {
    color: #a8b3be;
    padding-top: 12px;
    text-align: center;
    font-size: 12px;
    height: 16px
}

.vmModal.create-rule .table .row {
    height: 39px;
    line-height: 39px;
    margin: 0!important
}

.vmModal.create-rule .table .row:hover {
    background-color: #fff
}

.vmModal.create-rule .table .row .editable {
    width: 222px;
    min-width: 222px;
    max-width: 222px
}

.vmModal.create-rule .table .row select {
    width: 110px;
    margin-left: -11px
}

.vmModal.create-rule .table .row input {
    width: 230px;
    margin-left: -11px
}

.vmModal.create-rule .add-rule {
    margin-top: 20px;
    margin-left: 5px
}

.vmModal.create-rule .btn {
    display: inline-block;
    min-width: 80px;
    border: 1px solid transparent;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 12px;
    font-size: 12px;
    height: 28px;
    line-height: 26px;
    border-radius: 2px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #00afc8;
    border-color: #00afc8
}

.vmModal.create-rule .btn:hover {
    color: #ffffff;
    background-color: #00a5bd;
    border-color: #00a5bd
}

.vmModal.create-rule .btn:active {
    color: #ffffff;
    background-color: #009bb1
}

.vmModal.create-rule .btn[disabled],
.vmModal.create-rule .btn.disabled {
    color: #a8b3be;
    background-color: #d9e3e5;
    border-color: #d9e3e5;
    cursor: not-allowed
}

.vmModal.create-rule .btn[disabled]:hover,
.vmModal.create-rule .btn.disabled:hover {
    color: #a8b3be;
    background-color: #d9e3e5;
    border-color: #d9e3e5
}

.vmModal.create-rule .btn[disabled]:active,
.vmModal.create-rule .btn.disabled:active {
    color: #a8b3be;
    background-color: #d9e3e5
}

.vmModal.create-rule .btn-del {
    color: #ffffff;
    background-color: #e05c69;
    border-color: #e05c69
}

.vmModal.create-rule .btn-del:hover {
    color: #ffffff;
    background-color: #d6505c;
    border-color: #d6505c
}

.vmModal.create-rule .btn-del:active {
    color: #ffffff;
    background-color: #cd4855
}

.vmModal.create-rule .btn-cancel {
    color: #5b6775;
    background-color: #dfe4e6;
    border-color: #dfe4e6
}

.vmModal.create-rule .btn-cancel:hover {
    color: #5b6775;
    background-color: #d4dadc;
    border-color: #d4dadc
}

.vmModal.create-rule .btn-cancel:active {
    color: #5b6775;
    background-color: #c7cfd2
}

.vmModal.create-rule .btn-xs {
    padding: 0 12px;
    font-size: 12px;
    height: 24px;
    line-height: 22px;
    border-radius: 2px;
    min-width: 38px
}

.vmModal.create-rule i.status-icon {
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat;
    position: relative;
    top: 0;
    vertical-align: middle;
    border: none
}

.vmModal.create-rule i.status-icon:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

.vmModal.create-rule i.status-icon.error {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 -45px no-repeat;
    background-size: 15px 90px;
    border: none
}

.vmModal.create-rule i.status-icon.error:before {
    width: 0;
    height: 0
}

.vmModal.create-rule i.status-icon.active {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 0 no-repeat;
    background-size: 15px 90px
}

.vmModal.create-rule i.status-icon.active:before {
    width: 0;
    height: 0
}

.vmModal.create-rule i.status-icon.unaccepted {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 -60px no-repeat;
    background-size: 15px 90px
}

.vmModal.create-rule i.status-icon.unaccepted:before {
    width: 0;
    height: 0
}

.vmModal .enable-row input[type="radio"] {
    margin-top: 0
}

.vmModal .enable-row .radio-item {
    margin-left: 5px;
    margin-right: 25px
}

.vmModal .enable-row .session-row .session-type {
    width: 100px
}

.vmModal .enable-row .health-item {
    margin-top: 10px;
    height: 32px
}

.vmModal .enable-row .health-item input {
    width: 100px
}

.vmModal .enable-row .health-item span {
    margin-left: 8px
}

.vmModal .enable-row .no-subnet {
    color: #a8b3be
}

.vmModal .enable-row .no-subnet.error {
    border: none;
    color: #e05c69
}

.vmModal .enable-row .flexbox {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.vmModal .enable-row .flexbox .flex-tip {
    height: 52px
}

.vmModal .enable-row .flexbox .flex-tip .port {
    width: 189px
}

.vmModal .enable-row .fixed-width {
    width: 110px;
    min-width: 110px;
    max-width: 110px
}

.vmModal .enable-row .flex-port {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    text-align: right;
    padding-right: 5px
}

.vmModal .enable-row .flex {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.vmModal .enable-row .flex .full {
    width: 100%
}

.vmModal .enable-row .xl.disabled {
    background-color: #d9e3e5!important;
    color: #a8b3be;
    cursor: not-allowed
}

.instanceApp .vmPage .resource-pool-detail .btnList li a:after,
.instanceApp .vmPage .resource-pool-detail .moreActions a:after {
    display: none
}

.instanceApp .vmPage .resource-pool-detail .btnList li a,
.instanceApp .vmPage .resource-pool-detail .moreActions a {
    padding-left: 12px !important;
    font-size: 12px
}

.instanceApp .vmPage .resource-pool-detail .table-header {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 20px 20px 0 20px;
    overflow: hidden
}

.instanceApp .vmPage .resource-pool-detail .table-header>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    padding-left: 16px;
    background-color: #ecf0f2;
    color: #626f7e;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    border-right: 1px solid #fff;
    font-size: 12px;
    white-space: nowrap
}

.instanceApp .vmPage .resource-pool-detail .table-header>div:last-child {
    border-right: none
}

.instanceApp .vmPage .resource-pool-detail .table-header .status .selectWp {
    position: relative;
    display: inline-block;
    line-height: 28px
}

.instanceApp .vmPage .resource-pool-detail .table-header .status .selectWp:hover .selectLabel {
    background-position: 0 -21px
}

.instanceApp .vmPage .resource-pool-detail .table-header .status .selectLabel {
    position: relative;
    top: 2px;
    margin-left: 8px;
    display: inline-block;
    width: 19px;
    height: 13px;
    background: url(/static/public/img/table_arrow.png) 0 0 no-repeat
}

.instanceApp .vmPage .resource-pool-detail .table-header .status select {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    opacity: 0
}

.instanceApp .vmPage .resource-pool-detail .table {
    margin: 0 20px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.instanceApp .vmPage .resource-pool-detail .table .table-content {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-height: 410px;
    overflow-y: auto;
    overflow-x: hidden
}

.instanceApp .vmPage .resource-pool-detail .table .table-content i {
    margin-right: 5px !important;
    margin-top: -2px
}

.instanceApp .vmPage .resource-pool-detail .table .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    border-bottom: 1px solid #e7ebed;
    white-space: nowrap;
    font-size: 12px
}

.instanceApp .vmPage .resource-pool-detail .table .row:hover {
    background-color: #e1f4f7
}

.instanceApp .vmPage .resource-pool-detail .table .row.selected {
    background-color: #b9f1f9
}

.instanceApp .vmPage .resource-pool-detail .table .row .status {
    text-transform: capitalize
}

.instanceApp .vmPage .resource-pool-detail .table .row a.disabled {
    color: #738293;
    cursor: not-allowed
}

.instanceApp .vmPage .resource-pool-detail .table .row a.disabled:hover {
    color: #738293
}

.instanceApp .vmPage .resource-pool-detail .table .row a.disabled:active {
    color: #738293
}

.instanceApp .vmPage .resource-pool-detail .table .row>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    font-size: 12px;
    color: #252f3d;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.instanceApp .vmPage .resource-pool-detail .table .row>div:last-child {
    border-right: none
}

.instanceApp .vmPage .resource-pool-detail .table .row .num {
    font-weight: bold;
    color: #f78913
}

.instanceApp .vmPage .resource-pool-detail .table .row .price {
    font-weight: bold;
    color: #1eb9a5
}

.instanceApp .vmPage .resource-pool-detail .table-header,
.instanceApp .vmPage .resource-pool-detail .table {
    margin: 0;
    border-bottom: none!important
}

.instanceApp .vmPage .resource-pool-detail .table-header .row,
.instanceApp .vmPage .resource-pool-detail .table .row {
    padding-left: 0!important
}

.instanceApp .vmPage .resource-pool-detail .table-header .checkbox,
.instanceApp .vmPage .resource-pool-detail .table .checkbox {
    width: 30px;
    min-width: 30px;
    max-width: 30px
}

.instanceApp .vmPage .resource-pool-detail .table {
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row
}

.instanceApp .vmPage .resource-pool-detail .no-member {
    color: #a8b3be;
    padding-top: 12px;
    text-align: center;
    font-size: 12px
}

.instanceApp .vmPage .resource-pool-detail input[type="checkbox"] {
    margin-top: 0
}

.instanceApp .vmPage .resource-pool-detail .detailMoreActionDropDown {
    top: 40px
}

.instanceApp .vmPage .resource-pool-detail .pageHeader {
    line-height: 28px;
    min-height: 28px
}

.instanceApp .vmPage .resource-pool-detail .pageHeader .btnList {
    line-height: 28px
}

.instanceApp .vmPage .resource-pool-detail .pageHeader .btnList li a {
    line-height: 28px;
    min-height: 28px
}

.instanceApp .vmPage .resource-pool-detail .pageHeader .btnList li a:after {
    top: 5px
}

.instanceApp .vmPage .resource-pool-detail .moreActions {
    line-height: 28px;
    min-height: 28px
}

.instanceApp .vmPage .resource-pool-detail .moreActions .more_actions {
    height: 28px;
    line-height: 28px
}

.instanceApp .vmPage .resource-pool-detail .moreActions .more_actions:after {
    top: 5px
}

.vmModal.mini-quota {
    width: 600px
}

.vmModal.mini-quota .update {
    margin-right: 48px
}

.vmModal.mini-quota .switch {
    padding-right: 18px;
    border-top: none;
    height: 48px
}

.vmModal.mini-quota .switch a {
    margin-right: 0 !important;
    margin-top: 0
}

.vmModal .quota-panel {
    padding-top: 21px;
    padding-right: 30px;
    height: auto
}

.vmModal .quota-panel .wrapper {
    margin-bottom: 8px;
    max-height: 360px;
    overflow: auto;
    overflow-x: hidden;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.vmModal .quota-panel .wrapper>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.vmModal .quota-panel .wrapper>div:last-child {
    margin-left: 60px
}

.vmModal .quota-panel .wrapper li {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    margin-bottom: 15px
}

.vmModal .quota-panel .wrapper li>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.vmModal .quota-panel .wrapper li>div:first-child {
    width: 242px;
    min-width: 242px;
    max-width: 242px
}

.vmModal .quota-panel .wrapper li .row-bg {
    width: 219px;
    height: 14px;
    background-color: #e2e7ea;
    overflow: hidden
}

.vmModal .quota-panel .wrapper li .row {
    height: 14px;
    width: 0;
    background-color: #00afc8;
    -o-transition: 500ms;
    -ms-transition: 500ms;
    -moz-transition: 500ms;
    transition: 500ms;
    -webkit-transition: 500ms
}

.vmModal .quota-panel .wrapper li .row.green {
    background-color: #1eb9a5
}

.vmModal .quota-panel .wrapper li .row.orange {
    background-color: #ffac2a
}

.vmModal .quota-panel .wrapper li .usage {
    position: relative;
    padding-top: 8px;
    color: #738293
}

.vmModal .quota-panel .wrapper li .usage span:first-child {
    display: inline-block;
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.vmModal .quota-panel .wrapper li .usage span:last-child {
    position: absolute;
    right: 22px
}

.vmModal .quota-panel .wrapper li input {
    width: 87px
}

.vmModal .quota-panel .wrapper li input.error {
    border: 1px solid #e05c69
}

.vmModal .quota-panel .apply {
    margin-bottom: 20px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.vmModal .quota-panel .apply label {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 66px;
    min-width: 66px;
    max-width: 66px;
    vertical-align: top
}

.vmModal .quota-panel .apply textarea {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 60px;
    max-height: 60px
}

.vmModal .quota-panel .tips {
    margin-left: 0;
    margin-bottom: 20px;
    line-height: 26px;
    padding: 5px 12px;
    font-size: 12px;
    background-color: #fff7ea;
    border: 1px solid #ffcd7e;
    line-height: 20px
}

.vmModal .quota-panel .tips strong {
    color: #ffac2a;
    font-weight: normal
}

div[data-field="overview"] {
    padding: 0 !important
}

.instanceApp .overview-page {
    position: absolute !important;
    display: block;
    width: 100%;
    height: 100%;
    overflow: auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.instanceApp .overview-page .tipsLink {
    display: inline-block;
    margin-left: 5px;
    position: relative;
    overflow: visible
}

.instanceApp .overview-page .tipsLink label {
    color: white;
    background-color: #dae4e5;
    border-radius: 50%;
    display: inline-block;
    font-weight: bold;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center
}

.instanceApp .overview-page .tipsLink span {
    display: none!important
}

.instanceApp .overview-page .overview-wp {
    padding: 20px 20px 0 20px
}

.instanceApp .overview-page .tip {
    margin-bottom: 16px;
    padding: 0 24px;
    width: 100%;
    height: 34px;
    overflow: hidden;
    line-height: 34px;
    font-size: 12px;
    border: 1px solid #51c4d4;
    border-radius: 2px;
    background-color: #e5f7fa;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.instanceApp .overview-page .tip span {
    color: #1eb9a5
}

.instanceApp .overview-page .tip span strong {
    font-size: 14px
}

.instanceApp .overview-page .warn-tip {
    border: 1px solid #d2004a;
    background-color: #fce5e6
}

.instanceApp .overview-page .balance {
    height: 48px;
    padding: 0 24px 0 24px;
    line-height: 28px;
    background-color: #f3f6f8;
    border-radius: 3px;
    font-size: 14px;
    overflow: hidden
}

.instanceApp .overview-page .balance .account {
    float: left;
    padding-right: 54px;
    margin-top: 10px
}

.instanceApp .overview-page .balance .account span {
    font-size: 18px;
    padding: 0 5px;
    color: #1eb9a5
}

.instanceApp .overview-page .balance .account a {
    margin-left: 30px
}

.instanceApp .overview-page .balance .consumption {
    float: left;
    margin-top: 10px;
    padding-left: 54px;
    border-left: 1px solid #eee
}

.instanceApp .overview-page .balance .consumption span {
    color: #ffac2a;
    padding: 0 3px
}

.instanceApp .overview-page .balance .consumption span.time {
    font-size: 12px;
    color: #252f3d;
    padding: 0px
}

.instanceApp .overview-page .balance .top-up {
    float: right;
    margin-top: 8px
}

.instanceApp .overview-page .tabs {
    position: relative;
    height: 40px;
    width: 100%;
    border-bottom: 3px solid #ecf0f2
}

.instanceApp .overview-page .tabs.slide-show {
    margin-left: 18px
}

.instanceApp .overview-page .tabs.slide-show .prev,
.instanceApp .overview-page .tabs.slide-show .next {
    visibility: visible
}

.instanceApp .overview-page .tabs .wrapper {
    position: relative;
    width: 100%;
    height: 43px;
    overflow: hidden
}

.instanceApp .overview-page .tabs .tab-wp {
    position: absolute;
    white-space: nowrap;
    top: 0;
    left: 0;
    height: 40px;
    display: table-row
}

.instanceApp .overview-page .tabs .tab-wp .t {
    display: table-cell;
    margin-left: 8px;
    height: 40px;
    padding: 0 12px;
    line-height: 40px;
    border-right: none;
    color: #738293;
    font-size: 14px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis
}

.instanceApp .overview-page .tabs .tab-wp .t:first-child {
    margin-left: 0
}

.instanceApp .overview-page .tabs .tab-wp .t:hover {
    border-bottom: 3px solid #abe9f2
}

.instanceApp .overview-page .tabs .tab-wp .t.selected {
    border-bottom: 3px solid #00afc8;
    color: #252f3d;
    cursor: default
}

.instanceApp .overview-page .tabs .prev,
.instanceApp .overview-page .tabs .next {
    position: absolute;
    top: 0;
    height: 36px;
    width: 18px;
    visibility: collapse;
    cursor: pointer;
    border-radius: 2px;
    background-color: #00afc8;
    color: #fff;
    text-align: center
}

.instanceApp .overview-page .tabs .prev:hover,
.instanceApp .overview-page .tabs .next:hover {
    color: #fff;
    background-color: #00a5bd
}

.instanceApp .overview-page .tabs .prev:active,
.instanceApp .overview-page .tabs .next:active {
    background-color: #009bb1
}

.instanceApp .overview-page .tabs .prev.disabled,
.instanceApp .overview-page .tabs .next.disabled {
    background-color: #d9e3e5;
    color: #a8b3be;
    cursor: not-allowed
}

.instanceApp .overview-page .tabs .prev .icon-arrow,
.instanceApp .overview-page .tabs .next .icon-arrow {
    width: 18px;
    height: 26px;
    margin-top: 5px;
    background: url(/static/modules/apps/bills/img/arrows@2x.png) 7px -33px no-repeat;
    background-size: 6px 70px
}

.instanceApp .overview-page .tabs .prev {
    left: -18px
}

.instanceApp .overview-page .tabs .next {
    right: -18px
}

.instanceApp .overview-page .tabs .next .icon-arrow {
    background-position: 7px 5px
}

.instanceApp .overview-page .regions {
    height: 48px;
    overflow: hidden
}

.instanceApp .overview-page .info-wp {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.instanceApp .overview-page .info-wp .info-l {
    -webkit-flex: 2.3;
    -moz-flex: 2.3;
    -ms-flex: 2.3;
    flex: 2.3;
    height: 400px;
    margin-right: 20px
}

.instanceApp .overview-page .info-wp .info-l .search {
    font-size: 14px;
    float: right
}

.instanceApp .overview-page .info-wp .info-l .project-consumption .con {
    padding: 16px 12px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.instanceApp .overview-page .info-wp .info-l .project-consumption .con>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.instanceApp .overview-page .info-wp .info-l .project-consumption .con>div:first-child {
    border-right: 1px solid #ecf0f2;
    padding-right: 10px
}

.instanceApp .overview-page .info-wp .info-l .project-consumption .con>div:last-child {
    padding-left: 10px
}

.instanceApp .overview-page .info-wp .info-l .project-consumption .con .row {
    padding: 0 12px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    -o-transition: .25s;
    -ms-transition: .25s;
    -moz-transition: .25s;
    transition: .25s;
    -webkit-transition: .25s
}

.instanceApp .overview-page .info-wp .info-l .project-consumption .con .row:hover {
    background-color: #c1f4f7
}

.instanceApp .overview-page .info-wp .info-l .project-consumption .con .row .category {
    float: left;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.instanceApp .overview-page .info-wp .info-l .project-consumption .con .row .price {
    float: right;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right
}

.instanceApp .overview-page .info-wp .info-l .project-consumption .con .row .price .num {
    color: #ffac2a
}

.instanceApp .overview-page .info-wp .info-l .project-consumption .con .row .price .num.zero {
    color: #e0e0e0
}

.instanceApp .overview-page .info-wp .info-l .project-info .label {
    float: left;
    color: #738293;
    padding-right: 5px
}

.instanceApp .overview-page .info-wp .info-l .project-info .field {
    float: left
}

.instanceApp .overview-page .info-wp .info-l .project-info .delimiter {
    margin: 8px 0;
    border-top: 1px solid #ecf0f2
}

.instanceApp .overview-page .info-wp .info-l .project-info .row {
    line-height: 24px
}

.instanceApp .overview-page .info-wp .info-r {
    -webkit-flex: 3;
    -moz-flex: 3;
    -ms-flex: 3;
    flex: 3
}

.instanceApp .overview-page .info-wp .info-r .apply-quota {
    float: right;
    margin-top: 6px
}

.instanceApp .overview-page .info-wp .info-r .quota-list li {
    float: left;
    margin-bottom: 15px;
    width: 50%;
    height: 40px;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.instanceApp .overview-page .info-wp .info-r .quota-list li:nth-child(2n) {
    padding-left: 16px
}

.instanceApp .overview-page .info-wp .info-r .quota-list li:nth-child(2n+1) {
    padding-right: 16px
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .legend {
    height: 20px
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .legend .name {
    float: left
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .legend .quota {
    float: right
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .stripe-wp {
    position: relative;
    width: 100%;
    height: 14px;
    background-color: #e2e7ea;
    overflow: hidden;
    cursor: pointer;
    -o-transition: .25s;
    -ms-transition: .25s;
    -moz-transition: .25s;
    transition: .25s;
    -webkit-transition: .25s
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .stripe-wp .stripe {
    width: 0%;
    height: 14px;
    background-color: #00afc8;
    -o-transition: 500ms;
    -ms-transition: 500ms;
    -moz-transition: 500ms;
    transition: 500ms;
    -webkit-transition: 500ms
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .stripe-wp.blue:hover {
    -webkit-box-shadow: 0 0 4px rgba(0, 175, 200, 0.5);
    -moz-box-shadow: 0 0 4px rgba(0, 175, 200, 0.5);
    -ms-box-shadow: 0 0 4px rgba(0, 175, 200, 0.5);
    box-shadow: 0 0 4px rgba(0, 175, 200, 0.5)
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .stripe-wp.blue .stripe {
    background-color: #00afc8
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .stripe-wp.orange:hover {
    -webkit-box-shadow: 0 0 4px rgba(255, 172, 42, 0.5);
    -moz-box-shadow: 0 0 4px rgba(255, 172, 42, 0.5);
    -ms-box-shadow: 0 0 4px rgba(255, 172, 42, 0.5);
    box-shadow: 0 0 4px rgba(255, 172, 42, 0.5)
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .stripe-wp.orange .stripe {
    background-color: #ffac2a
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .stripe-wp.green:hover {
    -webkit-box-shadow: 0 0 4px rgba(30, 185, 165, 0.5);
    -moz-box-shadow: 0 0 4px rgba(30, 185, 165, 0.5);
    -ms-box-shadow: 0 0 4px rgba(30, 185, 165, 0.5);
    box-shadow: 0 0 4px rgba(30, 185, 165, 0.5)
}

.instanceApp .overview-page .info-wp .info-r .quota-list li .stripe-wp.green .stripe {
    background-color: #1eb9a5
}

.instanceApp .overview-page .box-holder {
    height: 20px;
    overflow: hidden
}

.instanceApp .overview-page .box {
    border: 1px solid #ecf0f2;
    border-radius: 2px;
    margin-top: 16px;
    overflow: hidden
}

.instanceApp .overview-page .box .title {
    background-color: #f3f6f8;
    font-size: 16px;
    color: #252f3d;
    height: 44px;
    line-height: 44px;
    padding-left: 24px;
    padding-right: 24px
}

.instanceApp .overview-page .box .title span {
    color: #ffac2a;
    padding: 0 3px;
    font-size: 18px
}

.instanceApp .overview-page .box .con {
    padding: 18px 24px
}

.instanceApp .overview-page .btn {
    display: inline-block;
    min-width: 80px;
    border: none;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 12px;
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #00afc8;
    border-color: #00afc8;
    -webkit-appearance: none
}

.instanceApp .overview-page .btn-sm {
    height: 28px;
    line-height: 28px
}

.instanceApp .overview-page .btn:hover {
    color: #ffffff;
    background-color: #00a5bd;
    border-color: #00a5bd
}

.instanceApp .overview-page .btn:active {
    color: #ffffff;
    background-color: #009bb1
}

.instanceApp .overview-page .btn-create {
    color: #ffffff;
    background-color: #1eb9a5;
    border-color: #1eb9a5
}

.instanceApp .overview-page .btn-create:hover {
    color: #ffffff;
    background-color: #09b29c;
    border-color: #09b29c
}

.instanceApp .overview-page .btn-create:active {
    color: #ffffff;
    background-color: #00a993
}

.instanceApp .overview-page .btn-status {
    color: #738293;
    background-color: #ecf0f2;
    border-color: #ecf0f2
}

.instanceApp .overview-page .btn-status:hover {
    color: #738293;
    background-color: #b9f1f9;
    border-color: #b9f1f9
}

.instanceApp .overview-page .btn-status:active {
    color: #738293;
    background-color: #b9f1f9
}

.instanceApp .overview-page .btn-status.selected {
    color: #252f3d;
    background-color: #5cd0e0;
    border-color: #5cd0e0
}

.instanceApp .overview-page .btn-group {
    display: inline-block;
    margin-top: 16px
}

.instanceApp .overview-page .btn-group>.btn {
    float: left;
    margin-right: 1px
}

.instanceApp .overview-page .btn-group>.btn:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.instanceApp .overview-page .btn-group>.btn:last-child {
    margin-right: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0
}

.instanceApp .overview-page .btn-group>.btn:not(:first-child):not(:last-child) {
    border-radius: 0
}

@media screen and (min-width:1680px) {
    .instanceApp .overview-page .info-wp .info-l {
        -webkit-flex: 1.3;
        -moz-flex: 1.3;
        -ms-flex: 1.3;
        flex: 1.3;
        margin-right: 40px
    }
    .instanceApp .overview-page .info-wp .info-r {
        -webkit-flex: 2;
        -moz-flex: 2;
        -ms-flex: 2;
        flex: 2
    }
}

#uoscloudoverview_weiyi {
    padding: 0 !important
}

#uoscloudoverview_weiyi .regions {
    height: 56px
}

#uoscloudoverview_weiyi .btn {
    display: inline-block;
    min-width: 80px;
    border: none;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 12px;
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #00afc8;
    border-color: #00afc8;
    -webkit-appearance: none
}

#uoscloudoverview_weiyi .btn-sm {
    height: 28px;
    line-height: 28px
}

#uoscloudoverview_weiyi .btn:hover {
    color: #ffffff;
    background-color: #00a5bd;
    border-color: #00a5bd
}

#uoscloudoverview_weiyi .btn:active {
    color: #ffffff;
    background-color: #009bb1
}

#uoscloudoverview_weiyi .btn-create {
    color: #ffffff;
    background-color: #1eb9a5;
    border-color: #1eb9a5
}

#uoscloudoverview_weiyi .btn-create:hover {
    color: #ffffff;
    background-color: #09b29c;
    border-color: #09b29c
}

#uoscloudoverview_weiyi .btn-create:active {
    color: #ffffff;
    background-color: #00a993
}

#uoscloudoverview_weiyi .btn-status {
    background-color: #ecf0f2;
    border-color: #ecf0f2;
    color: #000;
    height: 42px;
    width: 117px;
    border-radius: 3px
}

#uoscloudoverview_weiyi .btn-status:hover {
    color: #738293;
    background-color: #b9f1f9;
    border-color: #b9f1f9
}

#uoscloudoverview_weiyi .btn-status:active {
    color: #738293;
    background-color: #b9f1f9
}

#uoscloudoverview_weiyi .btn-status.selected {
    color: #fff;
    background-color: #55abda;
    border-color: #55abda
}

#uoscloudoverview_weiyi .btn-group {
    display: inline-block;
    margin-top: 13px
}

#uoscloudoverview_weiyi .btn-group>.btn {
    float: left;
    margin-right: 10px;
    padding-top: 7px
}

.instanceApp .overview-page .blocks {
    white-space: nowrap;
    height: 120px
}

.instanceApp .overview-page .blocks .block {
    position: relative;
    display: block;
    float: left;
    width: 23.5%;
    height: 120px;
    color: #fff;
    margin-right: 2%
}

.instanceApp .overview-page .blocks .block .block-inner {
    height: 85px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.instanceApp .overview-page .blocks .block .icon {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 42px;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    margin-top: 16px;
    margin-left: 21px
}

.instanceApp .overview-page .blocks .block .info {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 21px 23px 0 5px;
    text-align: right;
    overflow: hidden
}

.instanceApp .overview-page .blocks .block .num {
    font-size: 35px;
    line-height: 27px;
    margin-bottom: 13px;
    cursor: default;
    text-overflow: ellipsis;
    overflow: hidden
}

.instanceApp .overview-page .blocks .block .text {
    font-size: 15px;
    line-height: 15px;
    cursor: default
}

.instanceApp .overview-page .blocks .block .operation {
    padding-left: 16px;
    height: 35px;
    line-height: 35px;
    font-size: 13px;
    cursor: pointer;
    color: #fff
}

.instanceApp .overview-page .blocks .block .operation a:hover {
    color: #fff
}

.instanceApp .overview-page .blocks .block.ticket {
    background-color: #008cd7
}

.instanceApp .overview-page .blocks .block.ticket .operation {
    background-color: #0078ad
}

.instanceApp .overview-page .blocks .block.ticket .icon {
    background: url(/static/public/img/weiyiicon.png) -93px center no-repeat
}

.instanceApp .overview-page .blocks .block.instance {
    background-color: #2aa7e1
}

.instanceApp .overview-page .blocks .block.instance .operation {
    background-color: #1d84be
}

.instanceApp .overview-page .blocks .block.instance .icon {
    width: 45px;
    min-width: 45px;
    max-width: 45px;
    background: url(/static/public/img/weiyiicon.png) -185px center no-repeat
}

.instanceApp .overview-page .blocks .block.consumption {
    background-color: #28b779
}

.instanceApp .overview-page .blocks .block.consumption .operation {
    background-color: #16a064
}

.instanceApp .overview-page .blocks .block.consumption .icon {
    background: url(/static/public/img/weiyiicon.png) -279px center no-repeat
}

.instanceApp .overview-page .blocks .block.account {
    background-color: #ff9348;
    margin-right: 0
}

.instanceApp .overview-page .blocks .block.account .operation {
    background-color: #f96f0c
}

.instanceApp .overview-page .blocks .block.account .icon {
    background: url(/static/public/img/weiyiicon.png) -372px center no-repeat
}

.instanceApp .overview-page .box .con .content>h1 {
    color: #00afc8;
    font-size: 16px
}

.instanceApp .overview-page .box .con .content .time {
    color: #738293;
    display: block;
    text-align: right;
    width: 100%
}

.instanceApp .operation-page {
    position: absolute;
    top: 10px;
    left: 20px;
    right: 20px;
    bottom: 0
}

.instanceApp .operation-page .table-header {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 20px 20px 0 20px;
    overflow: hidden
}

.instanceApp .operation-page .table-header>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    padding-left: 16px;
    background-color: #ecf0f2;
    color: #626f7e;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    border-right: 1px solid #fff;
    font-size: 12px;
    white-space: nowrap
}

.instanceApp .operation-page .table-header>div:last-child {
    border-right: none
}

.instanceApp .operation-page .table-header .status .selectWp {
    position: relative;
    display: inline-block;
    line-height: 28px
}

.instanceApp .operation-page .table-header .status .selectWp:hover .selectLabel {
    background-position: 0 -21px
}

.instanceApp .operation-page .table-header .status .selectLabel {
    position: relative;
    top: 2px;
    margin-left: 8px;
    display: inline-block;
    width: 19px;
    height: 13px;
    background: url(/static/public/img/table_arrow.png) 0 0 no-repeat
}

.instanceApp .operation-page .table-header .status select {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    opacity: 0
}

.instanceApp .operation-page .table {
    margin: 0 20px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.instanceApp .operation-page .table .table-content {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-height: 410px;
    overflow-y: auto;
    overflow-x: hidden
}

.instanceApp .operation-page .table .table-content i {
    margin-right: 5px !important;
    margin-top: -2px
}

.instanceApp .operation-page .table .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    border-bottom: 1px solid #e7ebed;
    white-space: nowrap;
    font-size: 12px
}

.instanceApp .operation-page .table .row:hover {
    background-color: #e1f4f7
}

.instanceApp .operation-page .table .row.selected {
    background-color: #b9f1f9
}

.instanceApp .operation-page .table .row .status {
    text-transform: capitalize
}

.instanceApp .operation-page .table .row a.disabled {
    color: #738293;
    cursor: not-allowed
}

.instanceApp .operation-page .table .row a.disabled:hover {
    color: #738293
}

.instanceApp .operation-page .table .row a.disabled:active {
    color: #738293
}

.instanceApp .operation-page .table .row>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    font-size: 12px;
    color: #252f3d;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.instanceApp .operation-page .table .row>div:last-child {
    border-right: none
}

.instanceApp .operation-page .table .row .num {
    font-weight: bold;
    color: #f78913
}

.instanceApp .operation-page .table .row .price {
    font-weight: bold;
    color: #1eb9a5
}

.instanceApp .operation-page .table-header,
.instanceApp .operation-page .table {
    position: relative;
    margin: 0
}

.instanceApp .operation-page .table .status-icon.incomplete {
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat
}

.instanceApp .operation-page .no-data {
    display: none;
    text-align: center;
    margin-top: 30px
}

.instanceApp .operation-page .table.loading {
    position: relative;
    min-height: 100px;
    background: transparent url("/static/modules/apps/instance/i/icon-loading3.png") center 30px no-repeat
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .instanceApp .operation-page .table.loading {
        background: transparent url("/static/modules/apps/instance/i/icon-loading3@2x.png") center center no-repeat;
        background-size: 48px 48px
    }
}

.instanceApp .operation-page .table.loading:before {
    background: transparent url("/static/modules/apps/instance/i/icon-loading4.png") center center no-repeat;
    content: "";
    width: 48px;
    height: 48px;
    position: absolute;
    left: 50%;
    top: 30px;
    margin-left: -24px;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .instanceApp .operation-page .table.loading:before {
        background: transparent url("/static/modules/apps/instance/i/icon-loading4@2x.png") center center no-repeat;
        background-size: 48px 48px
    }
}

.instanceApp .operation-page .table.loading .table-content,
.instanceApp .operation-page .table.loading .summary {
    display: none
}

.instanceApp .operation-page .table.loading .no-data {
    display: none
}

.instanceApp .operation-page .empty .table-content,
.instanceApp .operation-page .empty .summary {
    display: none
}

.instanceApp .operation-page .empty .no-data {
    display: block
}

.instanceApp .operation-page .operation-title {
    margin: -10px 0 15px 0;
    padding: 6px 0 4px 12px;
    line-height: 35px;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    border-bottom: 3px solid #ecf0f2;
    font-size: 14px;
    color: #738293
}

.instanceApp .operation-page .operation-title h6 {
    display: inline-block;
    font-size: 14px;
    font-weight: normal
}

.instanceApp .operation-page .operation-title a {
    float: right
}

.instanceApp .operation-page .summary {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    margin: 15px 0 40px;
    height: 27px;
    min-height: 27px;
    max-height: 27px;
    line-height: 27px;
    font-size: 12px;
    color: #626f7e
}

.instanceApp .operation-page .summary .page {
    float: right;
    font-size: 12px
}

.instanceApp .operation-page .summary .page span {
    padding-right: 10px
}

.instanceApp .operation-page .summary .page a {
    display: inline-block;
    text-align: center;
    height: 24px;
    width: 20px;
    color: #626f7e
}

.instanceApp .operation-page .summary .page a:hover {
    color: #00afc8
}

.instanceApp .operation-page .summary .page a.selected {
    color: #00afc8;
    cursor: default
}

.instanceApp .operation-page .summary .page .prev,
.instanceApp .operation-page .summary .page .next {
    height: 24px;
    width: 24px;
    background: #00afc8 url(/static/modules/apps/bills/img/arrows@2x.png) 8px -33px no-repeat;
    background-size: 6px 70px;
    border-radius: 2px;
    color: #fff;
    text-align: center
}

.instanceApp .operation-page .summary .page .prev:hover,
.instanceApp .operation-page .summary .page .next:hover {
    color: #fff;
    background-color: #00a5bd
}

.instanceApp .operation-page .summary .page .prev:active,
.instanceApp .operation-page .summary .page .next:active {
    background-color: #009bb1
}

.instanceApp .operation-page .summary .page .prev.disabled,
.instanceApp .operation-page .summary .page .next.disabled {
    background-color: #d9e3e5;
    color: #a8b3be;
    cursor: not-allowed
}

.instanceApp .operation-page .summary .page .next {
    background-position: 9px 5px
}

.instanceApp .operation-page .summary .page .next.disabled {
    background-position: 9px -14px;
    cursor: not-allowed
}

.instanceApp .operation-page .operation-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.instanceApp .operation-page .operation-wrapper>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.vmModal.narrow[wp-model-id="create_whitelist_model"],
.vmModal.narrow[wp-model-id="update_whitelist"] {
    width: 600px
}

.vmModal.narrow[wp-model-id="create_whitelist_model"] .panel .row,
.vmModal.narrow[wp-model-id="update_whitelist"] .panel .row {
    margin-left: 100px
}

.vmModal.narrow[wp-model-id="create_whitelist_model"] .panel .row.rowRadio input[type="radio"],
.vmModal.narrow[wp-model-id="update_whitelist"] .panel .row.rowRadio input[type="radio"] {
    margin: 0 6px 0 20px
}

.vmModal.narrow[wp-model-id="create_whitelist_model"] .panel .row>label,
.vmModal.narrow[wp-model-id="update_whitelist"] .panel .row>label {
    right: 360px
}

.icon-whitelist {
    background: url(/static/public/img/whitelist_icon.png) 0 3px no-repeat !important
}

#uoscloudapp_center .tabs .tab.selected {
    color: #738293;
    border: none
}

#uoscloudapp_center .app_thumbnail {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: auto
}

#uoscloudapp_center .app_thumbnail li {
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
    width: 200px;
    height: 160px;
    background-color: #ecf0f2;
    overflow: hidden
}

#uoscloudapp_center .app_thumbnail li a {
    display: block;
    width: 190px;
    height: 124px;
    margin: 5px auto;
    margin-bottom: 7px;
    border: 1px solid #d5dddf
}

#uoscloudapp_center .app_thumbnail li img {
    width: 188px;
    height: 122px
}

#uoscloudapp_center .app_thumbnail li .name {
    margin-left: 5px
}

#uoscloudapp_center .tabPanels .panel[field="info"] {
    padding: 20px 0 0;
    overflow: hidden
}

#uoscloudapp_center .tabPanels .panel[field="intro"] .desc {
    width: 80%;
    line-height: 24px
}

.iconloading {
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat;
    position: relative;
    top: -2px;
    vertical-align: middle;
    border: none
}

.iconloading:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

.instanceApp i.status-icon {
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat;
    position: relative;
    top: -1px;
    vertical-align: middle;
    border: none
}

.instanceApp i.status-icon:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

.instanceApp i.status-icon.error {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 -45px no-repeat;
    background-size: 15px 90px
}

.instanceApp i.status-icon.error:before {
    width: 0;
    height: 0
}

.instanceApp i.status-icon.inactive {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 -45px no-repeat;
    background-size: 15px 90px
}

.instanceApp i.status-icon.inactive:before {
    width: 0;
    height: 0
}

.instanceApp i.status-icon.unaccepted {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 -60px no-repeat;
    background-size: 15px 90px
}

.instanceApp i.status-icon.unaccepted:before {
    width: 0;
    height: 0
}

.instanceApp i.status-icon.active,
.instanceApp i.status-icon.submitted {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 0 no-repeat;
    background-size: 15px 90px
}

.instanceApp i.status-icon.active:before,
.instanceApp i.status-icon.submitted:before {
    width: 0;
    height: 0
}

.instanceApp i.status-icon.down,
.instanceApp i.status-icon.closed {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/status/icon-status-down.png") 0 0 no-repeat;
    background-size: 15px 15px
}

.instanceApp i.status-icon.down:before,
.instanceApp i.status-icon.closed:before {
    width: 0;
    height: 0
}

.instanceApp i.status-icon.suspended {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 -30px no-repeat;
    background-size: 15px 90px
}

.instanceApp i.status-icon.suspended:before {
    width: 0;
    height: 0
}

.instanceApp i.status-icon.deprecated {
    width: 15px;
    height: 15px;
    display: inline-block;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 -60px no-repeat;
    background-size: 15px 90px
}

.instanceApp i.status-icon.deprecated:before {
    width: 0;
    height: 0
}

.instanceApp i.status-icon.shutoff {
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 -15px no-repeat;
    background-size: 15px 90px
}

.instanceApp i.status-icon.shutoff:before {
    width: 0;
    height: 0
}

.instanceApp i.status-icon.paused {
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-status-paused.png") 0 bottom no-repeat;
    background-position: 0 bottom;
    margin-top: 4px
}

.instanceApp i.status-icon.paused:before {
    width: 0;
    height: 0
}

.instanceApp i.status-icon.available {
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/status/icon-status-volume-available.png") 0 bottom no-repeat;
    background-position: 0 bottom;
    background-size: contain
}

.instanceApp i.status-icon.available:before {
    width: 0;
    height: 0
}

.instanceApp i.status-icon.accepted,
.instanceApp i.status-icon.in-use {
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/status/icon-status-volume-in-use.png") 0 bottom no-repeat;
    background-position: 0 bottom;
    background-size: contain
}

.instanceApp i.status-icon.accepted:before,
.instanceApp i.status-icon.in-use:before {
    width: 0;
    height: 0
}

.instanceApp #computingoverview .vmPage {
    display: block;
    height: auto;
    padding-bottom: 20px
}

.instanceApp #computingoverview .vmPage .quotaList {
    display: block
}

.instanceApp #uosclouddeprecated {
    padding-top: 20px
}

.instanceApp #uosclouddeprecated .detailView {
    position: static;
    transform: none;
    -webkit-transform: none;
    border-left: 0
}

.instanceApp #uosclouddeprecated .detailView .tabPanels {
    position: static
}

.instanceApp #uosclouddeprecated .detailView .tabPanels .panel {
    padding: 0
}

.instanceApp #uoscloudsubnet .detailView .tabPanels .panel .table.horizontal td {
    padding: 4px 20px
}

.instanceApp .comingSoon h1 {
    font-weight: normal;
    color: #505050;
    font-size: 25px
}

.instanceApp a[field="create_network"],
.instanceApp a[field="create_router"],
.instanceApp a[field="create_instance"] {
    padding-left: 28px;
    position: relative;
    padding-left: 32px;
    border-radius: 2px;
    background-color: #1eb9a5
}

.instanceApp a[field="create_network"]:after,
.instanceApp a[field="create_router"]:after,
.instanceApp a[field="create_instance"]:after {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-buttons-v2.png") 1px 1px no-repeat;
    background-size: 555px 40px;
    width: 16px;
    height: 20px;
    position: absolute;
    top: 7px;
    left: 10px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .instanceApp a[field="create_network"]:after,
    .instanceApp a[field="create_router"]:after,
    .instanceApp a[field="create_instance"]:after {
        background-image: url("/static/modules/apps/instance/i/icon-buttons-v2@2x.png")
    }
}

.instanceApp a[field="create_network"]:hover,
.instanceApp a[field="create_router"]:hover,
.instanceApp a[field="create_instance"]:hover {
    background-color: #00a5bd
}

.instanceApp a[field="create_network"]:active,
.instanceApp a[field="create_router"]:active,
.instanceApp a[field="create_instance"]:active {
    background-color: #009bb1
}

.instanceApp a[field="create_network"]:after,
.instanceApp a[field="create_router"]:after,
.instanceApp a[field="create_instance"]:after {
    background-position: 1px 1px
}

.instanceApp a[field="create_network"]:hover,
.instanceApp a[field="create_router"]:hover,
.instanceApp a[field="create_instance"]:hover {
    background-color: #09b29c
}

.instanceApp a[field="create_network"]:active,
.instanceApp a[field="create_router"]:active,
.instanceApp a[field="create_instance"]:active {
    background-color: #00a993
}

.instanceApp .passwordContainer .passwordArea {
    background: transparent url("/static/modules/apps/instance/i/icon-dot.png") 0 center repeat-x;
    background-size: 6px auto;
    height: 18px;
    line-height: 18px;
    text-indent: 10000px;
    display: block;
    float: left;
    overflow: hidden
}

.instanceApp .passwordContainer a {
    background: url("/static/modules/apps/instance/i/eye.png") 0 center no-repeat;
    background-size: 57px 15px;
    display: block;
    float: left;
    width: 15px;
    height: 17px;
    margin-left: 5px
}

.instanceApp .passwordContainer a:hover {
    background-position: center center
}

.instanceApp .passwordContainer.showPassword .passwordArea {
    text-indent: 0;
    background-image: none;
    width: auto!important
}

.instanceApp .passwordContainer.showPassword a {
    background-position: right center
}

.instanceApp div[data-field="ticket"] .number {
    background-color: #eee;
    border-radius: 9px;
    padding: 3px 10px
}

.instanceApp .vmPage {
    height: 100%;
    font-size: 13px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    min-width: 900px
}

.instanceApp .vmPage .tipsLink {
    display: inline-block;
    margin-left: 5px;
    position: relative;
    overflow: visible
}

.instanceApp .vmPage .tipsLink label {
    color: white;
    background-color: #dae4e5;
    border-radius: 50%;
    display: inline-block;
    font-weight: bold;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center
}

.instanceApp .vmPage .tipsLink span {
    display: none!important
}

.instanceApp .vmPage>.tips {
    margin-top: 10px;
    background-color: #e5f7fa;
    border: 1px solid #51c4d4;
    padding: 7px 12px;
    line-height: 20px;
    font-size: 12px;
    color: #252f3d;
    border-radius: 2px;
    height: 80px
}

.instanceApp .vmPage>.gross {
    margin-top: 15px;
    margin-bottom: 5px
}

.instanceApp .vmPage>.gross span {
    font-size: 14px;
    font-weight: bold;
    color: #1eb9a5
}

.instanceApp .vmPage>.tabs {
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 0;
    right: 0;
    margin-top: 0;
    height: 48px;
    border-bottom: 3px solid #ecf0f2;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.instanceApp .vmPage>.tabs .tab {
    border: none;
    font-size: 14px;
    line-height: 35px;
    height: 35px;
    display: block;
    margin-left: 8px
}

.instanceApp .vmPage>.tabs .tab:first-child {
    margin-left: 0
}

.instanceApp .vmPage>.tabs .tab:hover {
    background-color: #fff;
    border-bottom: 3px solid #abe9f2
}

.instanceApp .vmPage>.tabs .tab.selected {
    border-bottom: 3px solid #00afc8;
    color: #252f3d;
    cursor: default
}

.instanceApp .vmPage>.tabs .tab.selected:before {
    content: normal
}

.instanceApp .vmPage>.tabs .i-wp {
    float: right;
    height: 48px
}

.instanceApp .vmPage>.tabs .i-wp .i-grid,
.instanceApp .vmPage>.tabs .i-wp .i-list {
    display: inline-block;
    margin-right: 12px;
    margin-top: 18px;
    width: 16px;
    height: 16px;
    background: url(/static/modules/apps/instance/i/icon-grid.png) 0 0 no-repeat;
    cursor: pointer
}

.instanceApp .vmPage>.tabs .i-wp .i-grid:hover {
    background-position: 0 -40px
}

.instanceApp .vmPage>.tabs .i-wp .i-grid.selected {
    background-position: 0 -20px;
    cursor: default
}

.instanceApp .vmPage>.tabs .i-wp .i-list {
    background-position: -20px 0
}

.instanceApp .vmPage>.tabs .i-wp .i-list:hover {
    background-position: -20px -40px
}

.instanceApp .vmPage>.tabs .i-wp .i-list.selected {
    background-position: -20px -20px;
    cursor: default
}

.instanceApp .vmPage .tabsPlaceholder {
    height: 48px
}

.instanceApp .vmPage .pageHeader {
    position: relative;
    z-index: 1;
    line-height: 34px;
    overflow: hidden;
    padding: 10px 130px 12px 0;
    min-height: 34px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.instanceApp .vmPage .pageHeader .btnList {
    list-style: none;
    line-height: 34px;
    margin: 0
}

.instanceApp .vmPage .pageHeader .btnList li {
    float: left
}

.instanceApp .vmPage .pageHeader .btnList li a {
    display: inline-block;
    line-height: 34px
}

.instanceApp .vmPage .pageHeader .btnList a,
.instanceApp .vmPage .pageHeader>a {
    background-color: #00afc8;
    color: #fff;
    margin-right: 8px;
    display: block;
    padding: 0 12px 0 28px;
    border-radius: 2px
}

.instanceApp .vmPage .pageHeader .btnList a.action_create,
.instanceApp .vmPage .pageHeader>a.action_create {
    padding-left: 28px;
    position: relative;
    padding-left: 32px;
    border-radius: 2px;
    background-color: #1eb9a5
}

.instanceApp .vmPage .pageHeader .btnList a.action_create:after,
.instanceApp .vmPage .pageHeader>a.action_create:after {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-buttons-v2.png") 1px 1px no-repeat;
    background-size: 555px 40px;
    width: 16px;
    height: 20px;
    position: absolute;
    top: 7px;
    left: 10px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .instanceApp .vmPage .pageHeader .btnList a.action_create:after,
    .instanceApp .vmPage .pageHeader>a.action_create:after {
        background-image: url("/static/modules/apps/instance/i/icon-buttons-v2@2x.png")
    }
}

.instanceApp .vmPage .pageHeader .btnList a.action_create:hover,
.instanceApp .vmPage .pageHeader>a.action_create:hover {
    background-color: #00a5bd
}

.instanceApp .vmPage .pageHeader .btnList a.action_create:active,
.instanceApp .vmPage .pageHeader>a.action_create:active {
    background-color: #009bb1
}

.instanceApp .vmPage .pageHeader .btnList a.action_create:after,
.instanceApp .vmPage .pageHeader>a.action_create:after {
    background-position: 1px 1px
}

.instanceApp .vmPage .pageHeader .btnList a.action_create:hover,
.instanceApp .vmPage .pageHeader>a.action_create:hover {
    background-color: #09b29c
}

.instanceApp .vmPage .pageHeader .btnList a.action_create:active,
.instanceApp .vmPage .pageHeader>a.action_create:active {
    background-color: #00a993
}

.instanceApp .vmPage .pageHeader .btnList a.disabled,
.instanceApp .vmPage .pageHeader>a.disabled {
    cursor: not-allowed;
    background-color: #d9e3e5 !important;
    color: #a8b3be
}

.instanceApp .vmPage .pageHeader .btnList a.disabled:hover,
.instanceApp .vmPage .pageHeader>a.disabled:hover {
    text-decoration: none
}

.instanceApp .vmPage .pageHeader .btnList a.disabled[wp-type="droptdown"],
.instanceApp .vmPage .pageHeader>a.disabled[wp-type="droptdown"],
.instanceApp .vmPage .pageHeader .btnList a.disabled[wp-type="button"],
.instanceApp .vmPage .pageHeader>a.disabled[wp-type="button"] {
    background-color: #ddd
}

.instanceApp .vmPage .pageHeader .btnList a.iconRefresh,
.instanceApp .vmPage .pageHeader>a.iconRefresh {
    width: 14px;
    height: 34px;
    margin-right: 0;
    background-color: #00afc8;
    padding: 0 10px;
    position: relative
}

.instanceApp .vmPage .pageHeader .btnList a.iconRefresh:before,
.instanceApp .vmPage .pageHeader>a.iconRefresh:before {
    position: absolute;
    background: transparent url("/static/modules/apps/instance/i/icon-refresh2.png") 11px center no-repeat;
    background-size: 14px 14px;
    content: "";
    width: 34px;
    height: 34px;
    left: 0;
    top: 0
}

.instanceApp .vmPage .pageHeader .btnList a.iconRefresh:hover,
.instanceApp .vmPage .pageHeader>a.iconRefresh:hover {
    background-color: #00a5bd
}

.instanceApp .vmPage .pageHeader .btnList a.iconRefresh:active,
.instanceApp .vmPage .pageHeader>a.iconRefresh:active {
    background-color: #009bb1
}

.instanceApp .vmPage .pageHeader .btnList a.iconRefresh.spin,
.instanceApp .vmPage .pageHeader>a.iconRefresh.spin {
    cursor: default
}

.instanceApp .vmPage .pageHeader .btnList a.iconRefresh.spin:before,
.instanceApp .vmPage .pageHeader>a.iconRefresh.spin:before {
    animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -webkit-animation: spin 1s linear infinite
}

.instanceApp .vmPage .pageHeader .btnList li a {
    position: relative;
    padding-left: 32px;
    border-radius: 2px
}

.instanceApp .vmPage .pageHeader .btnList li a:after {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-buttons-v2.png") 1px 1px no-repeat;
    background-size: 555px 40px;
    width: 16px;
    height: 20px;
    position: absolute;
    top: 7px;
    left: 10px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .instanceApp .vmPage .pageHeader .btnList li a:after {
        background-image: url("/static/modules/apps/instance/i/icon-buttons-v2@2x.png")
    }
}

.instanceApp .vmPage .pageHeader .btnList li a:hover {
    background-color: #00a5bd
}

.instanceApp .vmPage .pageHeader .btnList li a:active {
    background-color: #009bb1
}

.instanceApp .vmPage .pageHeader .btnList li a[field="start"]:after {
    background-position: -89px 1px
}

.instanceApp .vmPage .pageHeader .btnList li a[field="stop"]:after {
    background-position: -120px 1px
}

.instanceApp .vmPage .pageHeader .btnList li a[field="vnc_console"]:after {
    background-position: -299px 3px
}

.instanceApp .vmPage .pageHeader .btnList li a[field="activate_user"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field^="enable_"]:after {
    background-position: -536px 1px
}

.instanceApp .vmPage .pageHeader .btnList li a[field="revoke_user"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field^="disable_"]:after {
    background-position: -509px 1px
}

.instanceApp .vmPage .pageHeader .btnList li a[field="reinvite"]:after {
    background-position: -29px 1px
}

.instanceApp .vmPage .pageHeader .btnList li a[field="edit_project"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field="edit_user"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field="change_security_group"]:after {
    background-position: -269px 1px
}

.instanceApp .vmPage .pageHeader .btnList li a[field="detach"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field="disconnect_router"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field="dissociate"]:after {
    background-position: -359px 1px;
    top: 8px
}

.instanceApp .vmPage .pageHeader .btnList li a[field="attach"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field="attach_to_instance"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field="connect_router"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field="assocate_to_router"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field="associate_to_instances"]:after {
    background-position: -329px 1px;
    top: 7px
}

.instanceApp .vmPage .pageHeader .btnList li a[field="change_bandwidth"]:after {
    background-position: -176px center
}

.instanceApp .vmPage .pageHeader .btnList li a[field="create_keypair"]:after,
.instanceApp .vmPage .pageHeader .btnList li a[field="launch"]:after {
    background-position: 1px 1px
}

.instanceApp .vmPage .pageHeader .btnList li a[field="create"] {
    background-color: #1eb9a5
}

.instanceApp .vmPage .pageHeader .btnList li a[field="create"]:hover {
    background-color: #09b29c
}

.instanceApp .vmPage .pageHeader .btnList li a[field="create"]:active {
    background-color: #00a993
}

.instanceApp .vmPage .pageHeader .btnList li a[field="delete"] {
    background-color: #e05c69
}

.instanceApp .vmPage .pageHeader .btnList li a[field="delete"]:hover {
    background-color: #d6505c
}

.instanceApp .vmPage .pageHeader .btnList li a[field="delete"]:active {
    background-color: #cd4855
}

.instanceApp .vmPage .pageHeader .btnList li a[field="delete"]:after {
    background-position: -476px 1px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled {
    cursor: not-allowed
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled:after {
    background-position: 1px -23px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="vnc_console"]:after {
    background-position: -299px -22px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="start"]:after {
    background-position: -89px -23px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="stop"]:after {
    background-position: -120px -23px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="detach"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="disconnect_router"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="dissociate"]:after {
    background-position: -359px -23px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="attach"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="attach_to_instance"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="connect_router"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="assocate_to_router"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="assocate_to_load_balancer"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="associate_to_instances"]:after {
    background-position: -329px -23px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="delete"]:hover {
    background-color: #d6505c
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="delete"]:active {
    background-color: #cd4855
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="delete"]:after {
    background-position: -476px -23px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="create_keypair"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="launch"]:after {
    background-position: 1px -23px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="activate_user"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field^="enable_"]:after {
    background-position: -536px -23px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="revoke_user"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field^="disable_"]:after {
    background-position: -509px -23px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="reinvite"]:after {
    background-position: -29px -23px
}

.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="edit_project"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="edit_user"]:after,
.instanceApp .vmPage .pageHeader .btnList li a.disabled[field="change_security_group"]:after {
    background-position: -269px -23px
}

.instanceApp .vmPage .pageHeader .more_actions {
    background: #00afc8;
    padding-left: 32px;
    position: relative;
    font-size: 13px;
    color: #fff;
    background-color: #00afc8;
    border-radius: 2px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    min-width: 50px;
    padding: 0 20px;
    min-width: 0;
    padding: 0 20px 0 32px
}

.instanceApp .vmPage .pageHeader .more_actions:after {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-buttons-v2.png") 1px 1px no-repeat;
    background-size: 555px 40px;
    width: 16px;
    height: 20px;
    position: absolute;
    top: 7px;
    left: 10px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .instanceApp .vmPage .pageHeader .more_actions:after {
        background-image: url("/static/modules/apps/instance/i/icon-buttons-v2@2x.png")
    }
}

.instanceApp .vmPage .pageHeader .more_actions:hover {
    background-color: #00a5bd
}

.instanceApp .vmPage .pageHeader .more_actions:active {
    background-color: #009bb1
}

.instanceApp .vmPage .pageHeader .more_actions:before {
    position: absolute;
    content: "";
    right: 10px;
    bottom: 10px;
    width: 0;
    height: 0;
    border-bottom: 7px solid #fff;
    border-left: 7px solid rgba(0, 0, 0, 0)
}

.instanceApp .vmPage .pageHeader .more_actions:after {
    background-position: -239px 1px
}

.instanceApp .vmPage .pageHeader .searchDiv {
    right: 0;
    position: absolute;
    height: 32px;
    line-height: 32px
}

.instanceApp .vmPage .pageHeader .searchDiv form {
    margin: 0
}

.instanceApp .vmPage .pageHeader .searchDiv form input {
    width: 120px;
    padding: 0 30px 0 10px
}

.instanceApp .vmPage .pageHeader .searchDiv form input:hover,
.instanceApp .vmPage .pageHeader .searchDiv form input:focus {
    border-color: #00afc8
}

.instanceApp .vmPage .pageHeader .searchDiv a {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 1px;
    right: 0;
    background: url(/static/public/img/icon-search.png) center center no-repeat;
    background-size: 12px auto;
    cursor: pointer
}

.instanceApp .vmPage .pageHeader .moreActions {
    position: relative;
    overflow: hidden
}

.instanceApp .vmPage .pageHeader .moreActions>a.disabled {
    cursor: not-allowed;
    color: #c0c0c0
}

.instanceApp .vmPage .pageHeader .moreActions>a.disabled:hover {
    text-decoration: none
}

.instanceApp .vmPage .pageHeader .moreActions>a.disabled[wp-type="droptdown"],
.instanceApp .vmPage .pageHeader .moreActions>a.disabled[wp-type="button"] {
    background-color: #ddd
}

.instanceApp .vmPage .noDataView {
    position: absolute;
    left: 0;
    right: 0;
    top: 140px;
    text-align: center
}

.instanceApp .vmPage .tabs~.noDataView {
    top: 188px
}

.instanceApp .vmPage .tips~.noDataView {
    top: 246px
}

.instanceApp .vmPage .dataView {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.instanceApp .vmPage .dataView.onDrag .slick-cell {
    cursor: default;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.instanceApp .vmPage .dataView .slick-header-column select {
    display: none
}

.instanceApp .vmPage .dataView .slick-header-column input[type="checkbox"] {
    margin-top: 0px
}

.instanceApp .vmPage .dataView .filterWp .selectLabel {
    position: relative;
    top: 2px;
    margin-left: 8px;
    width: 19px;
    height: 13px;
    background: url(/static/public/img/table_arrow.png) 0 0 no-repeat
}

.instanceApp .vmPage .dataView .filterWp:hover .selectLabel {
    background-position: 0 -21px
}

.instanceApp .vmPage .dataView .slick-row:hover .cssname a {
    overflow: hidden
}

.instanceApp .vmPage .dataView .cssname a {
    overflow: hidden
}

.instanceApp .vmPage .dataView .cssimage span,
.instanceApp .vmPage .dataView .cssnameField span {
    padding-left: 25px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 0 center;
    line-height: 25px;
    height: 25px;
    margin-top: 5px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.instanceApp .vmPage .dataView .cssimage span.ubuntu,
.instanceApp .vmPage .dataView .cssnameField span.ubuntu {
    background-image: url("/static/modules/apps/instance/i/logo/ubuntu.png")
}

.instanceApp .vmPage .dataView .cssimage span.centos,
.instanceApp .vmPage .dataView .cssnameField span.centos {
    background-image: url("/static/modules/apps/instance/i/logo/centos.png")
}

.instanceApp .vmPage .dataView .cssimage span.windows,
.instanceApp .vmPage .dataView .cssnameField span.windows {
    background-image: url("/static/modules/apps/instance/i/logo/windows.png")
}

.instanceApp .vmPage .dataView .cssimage span.redhat,
.instanceApp .vmPage .dataView .cssnameField span.redhat {
    background-image: url("/static/modules/apps/instance/i/logo/redhat.png")
}

.instanceApp .vmPage .dataView .cssimage span.linux,
.instanceApp .vmPage .dataView .cssnameField span.linux {
    background-image: url("/static/modules/apps/instance/i/logo/linux.png")
}

.instanceApp .vmPage .dataView .cssstatus,
.instanceApp .vmPage .dataView .cssstate {
    text-transform: capitalize
}

.instanceApp .vmPage .dataView .cssdtype i.icon {
    display: inline-block;
    top: 4px;
    position: relative;
    width: 15px;
    height: 15px;
    background: url("/static/modules/apps/instance/i/icon-volume-type.png");
    background-size: 40px 15px;
    cursor: default;
    margin-right: 6px
}

.instanceApp .vmPage .dataView .cssdtype i.icon.sata {
    background-position: right 0
}

.instanceApp .vmPage .dataView .cssquick_action {
    text-overflow: clip
}

.instanceApp .vmPage .dataView .cssquick_action a {
    display: inline-block;
    vertical-align: middle;
    top: -2px;
    position: relative;
    margin-right: 5px;
    background-color: #00afc8;
    border-radius: 2px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    width: 70px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.instanceApp .vmPage .dataView .cssquick_action a[field="show_more"] {
    position: relative;
    font-size: 13px;
    color: #fff;
    background-color: #00afc8;
    border-radius: 2px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    min-width: 50px;
    padding: 0 20px;
    min-width: 0;
    width: 30px;
    height: 24px;
    line-height: 24px
}

.instanceApp .vmPage .dataView .cssquick_action a[field="show_more"]:before {
    position: absolute;
    content: "";
    right: 10px;
    bottom: 10px;
    width: 0;
    height: 0;
    border-bottom: 7px solid #fff;
    border-left: 7px solid rgba(0, 0, 0, 0)
}

.instanceApp .vmPage .dataView .cssquick_action a[field="show_more"]:before {
    bottom: 7px;
    right: 7px
}

.instanceApp .vmPage .dataView .cssquick_action a:hover {
    background-color: #019cb4;
    text-decoration: none
}

.instanceApp .vmPage .dataView .cssquick_action a:last-child {
    margin-right: 0
}

.instanceApp .vmPage .dataView .cssquick_action a.disabled {
    background-color: #dcdcdc;
    color: #c0c0c0!important;
    cursor: not-allowed
}

.instanceApp .vmPage .dataView .cssquick_action a[field="delete"] {
    background-color: #de5c5c
}

.instanceApp .vmPage .dataView .cssquick_action a[field="delete"]:hover {
    background-color: #d34444
}

.instanceApp .vmPage .dataView .cssquick_action .action_restart {
    display: inline-block;
    width: 21px;
    height: 19px;
    background: url("/static/modules/apps/instance/i/icon-operation.png") 0 0 no-repeat;
    text-indent: 1000px;
    overflow: hidden;
    margin: 9px 10px
}

.instanceApp .vmPage .dataView .cssquick_action.selected .action_restart {
    background-position: 0 bottom
}

.instanceApp .vmPage .dataView .cssquick_action.selected .action_vnc {
    background-position: right bottom
}

.instanceApp .vmPage .dataView .slick-cell {
    line-height: 23px;
    height: 23px;
    padding-top: 8px;
    padding-bottom: 9px;
    font-size: 12px;
    cursor: text
}

.instanceApp .vmPage .dataView .slick-cell input[type="checkbox"] {
    margin-top: 0
}

.instanceApp .vmPage .dataView .slick-cell.cssmschecked {
    padding-right: 0;
    padding-left: 10px
}

.instanceApp .vmPage .dataView .slick-cell>strong {
    color: #1eb9a5;
    font-weight: normal
}

.instanceApp .vmPage .dataView .slick-cell .price {
    color: #1eb9a5;
    font-weight: bold
}

.instanceApp .vmPage .dataView.waitingData {
    position: relative;
    z-index: 3
}

.instanceApp .vmPage .dataView.waitingData>div {
    opacity: 0
}

.instanceApp .vmPage .dataView.waitingData .slick-header {
    opacity: 1;
    display: block
}

.instanceApp .vmPage .loading {
    display: none
}

.instanceApp .vmPage .loading.waitingData {
    display: block;
    position: absolute;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    left: 50%;
    top: 132px;
    z-index: 990
}

.instanceApp .vmPage .loading.waitingData .spinInner {
    position: static;
    background: transparent url("/static/modules/apps/instance/i/icon-loading4.png") center center no-repeat;
    content: "";
    width: 48px;
    height: 48px;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .instanceApp .vmPage .loading.waitingData .spinInner {
        background: transparent url("/static/modules/apps/instance/i/icon-loading4@2x.png") center center no-repeat;
        background-size: 48px 48px
    }
}

.instanceApp .vmPage .loading.waitingData:after {
    background: transparent url("/static/modules/apps/instance/i/icon-loading3.png") center center no-repeat;
    content: "";
    width: 48px;
    height: 48px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 24px;
    top: 24px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .instanceApp .vmPage .loading.waitingData:after {
        background: transparent url("/static/modules/apps/instance/i/icon-loading3@2x.png") center center no-repeat;
        background-size: 48px 48px
    }
}

.instanceApp .vmPage .tabs~.loading.waitingData {
    top: 180px
}

.instanceApp .vmPage .tips~.loading.waitingData {
    top: 238px
}

.instanceApp .vmPage .detailView {
    position: relative;
    height: 0;
    -o-transition: height 10ms;
    -ms-transition: height 10ms;
    -moz-transition: height 10ms;
    transition: height 10ms;
    -webkit-transition: height 10ms;
    overflow: hidden
}

.instanceApp .vmPage .detailView .closeDetail {
    display: none
}

.instanceApp .vmPage .detailView .vdivider {
    height: 29px;
    cursor: row-resize;
    position: relative
}

.instanceApp .vmPage .detailView .vdivider:before {
    width: 58px;
    margin-left: -29px;
    top: 10px;
    bottom: 10px;
    left: 50%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    position: absolute;
    content: ""
}

.instanceApp .vmPage .detailView .vdivider:after {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #ddd;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -0.5px
}

.instanceApp .vmPage .detailView .tabs {
    margin-top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.instanceApp .vmPage .detailView .tabs .tab.hide {
    display: none
}

.instanceApp .vmPage .detailView .tabPanels {
    position: absolute;
    left: 0;
    right: 0;
    top: 65px;
    bottom: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto
}

.instanceApp .vmPage .detailView .tabPanels .panel {
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 23px;
    background-color: #fff;
    z-index: 1;
    position: relative
}

.instanceApp .vmPage .detailView .tabPanels .panel .row {
    padding-left: 30px;
    font-size: 13px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.instanceApp .vmPage .detailView .tabPanels .panel .row label {
    font-size: 12px;
    width: 30px;
    color: #444444;
    width: 120px
}

.instanceApp .vmPage .detailView .tabPanels .panel .row span {
    color: #787878;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .content {
    margin-top: 13px;
    width: 67%;
    font-size: 12px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] h6 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    word-break: break-all
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .title h6 {
    float: left
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .date {
    float: right;
    color: #a8b3be
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .con {
    margin-top: 18px;
    padding-bottom: 19px;
    border-bottom: 1px solid #f0f0f0;
    line-height: 24px;
    word-break: break-all;
    color: #738293
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .con .attach-con {
    margin-top: 12px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .con .attach-con>div {
    float: left;
    margin-right: 20px;
    margin-bottom: 12px;
    width: 120px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .con .attach-con>div .link {
    display: block;
    margin-top: 10px;
    text-align: center;
    overflow: hidden;
    width: 120px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .con .attach-con .img-wp {
    width: 120px;
    height: 90px;
    line-height: 90px;
    background-color: #ecf0f2;
    border-radius: 2px;
    text-align: center;
    overflow: hidden
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .con .attach-con .img-wp img {
    cursor: pointer
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .reply {
    margin-top: 18px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .reply h6 {
    margin-bottom: 25px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .reply img {
    width: 40px;
    height: 40px;
    border: 3px solid #fff;
    border-radius: 50%;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] li {
    padding: 16px;
    margin-bottom: 8px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .time {
    margin-top: 10px;
    color: #969696
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .a {
    background-color: #fef5f4;
    border-radius: 2px;
    word-break: break-all
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .a .img {
    float: left;
    margin-left: 0px;
    margin-top: -10px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .a img {
    margin-right: 12px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .a>div {
    margin-left: 52px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .a .time {
    float: left;
    text-align: left;
    width: 100%;
    color: #a8b3be
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .a .time span {
    color: #738293
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .a .desc {
    float: left
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .q {
    background-color: #f4fbfc;
    border-radius: 2px;
    word-break: break-all
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .q .img {
    float: right;
    margin-top: -10px;
    margin-right: 0
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .q .img div {
    text-align: right
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .q img {
    margin-left: 12px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .q>div {
    margin-right: 52px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .q .time {
    float: right;
    text-align: right;
    width: 100%;
    color: #a8b3be
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .q .time span {
    color: #738293
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .q .desc {
    float: right
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] textarea {
    margin-bottom: 15px;
    height: 102px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .submit {
    float: right;
    margin-bottom: 20px;
    margin-right: 0px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 2px;
    background-color: #1eb9a5;
    color: #fff
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .submit:hover {
    background-color: #09b29c
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .submit:active {
    background-color: #00a993
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="ticket_detail"] .submit.disabled {
    cursor: not-allowed;
    background-color: #dcdcdc!important;
    color: rgba(255, 255, 255, 0.7)
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] {
    padding-top: 10px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorSelector {
    float: right;
    clear: both
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorSelector li {
    float: left;
    border-right: 1px solid #fff
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorSelector li a {
    display: block;
    background-color: #ecf0f2;
    color: #738293;
    line-height: 24px;
    padding: 3px 12px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorSelector li a:hover {
    background-color: #b9f1f9
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorSelector li a.selected {
    color: #252f3d;
    background-color: #5cd0e0
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorSelector li:first-child a {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorSelector li:last-child a {
    margin-right: 0;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .chart {
    width: auto;
    height: 200px;
    float: none;
    background-color: transparent;
    border: none
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .chart:first-child {
    margin-top: 0
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .chart:before {
    display: none
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .chart.loadingData {
    position: relative
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .chart.loadingData .highcharts-no-data {
    display: none
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .chart.loadingData:before {
    display: block;
    position: absolute;
    background: transparent url("/static/modules/apps/instance/i/icon-loading4.png") center center no-repeat;
    background-size: 24px 24px;
    content: "";
    width: 24px;
    height: 24px;
    left: 50%;
    top: 50%;
    margin-left: -12px;
    margin-top: -12px;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
    opacity: 1;
    z-index: 2
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .chart.loadingData:before {
        background: transparent url("/static/modules/apps/instance/i/icon-loading4@2x.png") center center no-repeat;
        background-size: 24px 24px
    }
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .chart.loadingData:after {
    position: absolute;
    background: transparent url("/static/modules/apps/instance/i/icon-loading3.png") center center no-repeat;
    background-size: 24px 24px;
    content: "";
    width: 24px;
    height: 24px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
    .instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .chart.loadingData:after {
        background: transparent url("/static/modules/apps/instance/i/icon-loading3@2x.png") center center no-repeat;
        background-size: 24px 24px
    }
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorPanel {
    overflow: hidden;
    height: 100%;
    position: relative
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorPanel .topBar {
    overflow: hidden;
    height: 42px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorPanel .topBar .select {
    float: right;
    margin-right: 20px;
    width: 150px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorPanel .monitorContainer {
    overflow: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    bottom: 0
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="system_log"] {
    overflow: auto;
    padding-top: 0
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="system_log"].pendingData .logPanel {
    display: none
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="system_log"] .logPanel {
    color: #fff
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="system_log"] .logPanel.empty {
    color: #252f3d;
    text-align: center;
    padding: 50px 0 0 0!important
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="system_log"] .logPanel.withData {
    background-color: #000;
    padding: 10px!important;
    font-family: "Courier New"
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="vnc"] {
    position: relative
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="vnc"] .logPanel {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 12px;
    bottom: 12px
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="vnc"] .logPanel iframe {
    width: 100%;
    height: 100%;
    border: none
}

.instanceApp .vmPage .detailView .tabPanels .panel.pendingData:before {
    position: absolute;
    background: transparent url("/static/modules/apps/instance/i/icon-loading4.png") center center no-repeat;
    background-size: 48px 48px;
    content: "";
    width: 48px;
    height: 48px;
    left: 50%;
    top: 80px;
    margin-left: -24px;
    margin-top: -24px;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
    z-index: 2
}

.instanceApp .vmPage .detailView .tabPanels .panel.pendingData:after {
    position: absolute;
    background: transparent url("/static/modules/apps/instance/i/icon-loading3.png") center center no-repeat;
    background-size: 48px 48px;
    content: "";
    width: 48px;
    height: 48px;
    left: 50%;
    top: 80px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2
}

.instanceApp .vmPage .detailView .tabPanels .panel .descBlock {
    min-width: 400px;
    width: 50%;
    float: left
}

.instanceApp .vmPage .detailView .tabPanels .panel .descBlock .descRow {
    padding-left: 30px
}

.instanceApp .vmPage .detailView .tabPanels .panel .descBlock .descRow label {
    display: inline-block;
    width: 100px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table-caption {
    margin-bottom: 10px;
    padding: 0 16px;
    line-height: 36px;
    font-size: 14px;
    position: relative;
    text-align: left;
    background-color: #ecf0f2;
    border-radius: 2px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table-caption .action-slide {
    position: absolute;
    padding: 11px;
    top: 0;
    right: 2.5px
}

.instanceApp .vmPage .detailView .tabPanels .panel .save {
    background: transparent url("/static/modules/apps/instance/i/icon-add-remove.png") -94px center no-repeat;
    width: 18px;
    height: 16px;
    cursor: pointer;
    background-size: 184px 16px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 5px
}

.instanceApp .vmPage .detailView .tabPanels .panel .save:hover {
    background-position: -142px center
}

.instanceApp .vmPage .detailView .tabPanels .panel .cancel {
    background: transparent url("/static/modules/apps/instance/i/icon-add-remove.png") -118px center no-repeat;
    width: 18px;
    height: 16px;
    cursor: pointer;
    background-size: 184px 16px;
    display: inline-block;
    margin-top: 5px
}

.instanceApp .vmPage .detailView .tabPanels .panel .cancel:hover {
    background-position: -166px center
}

.instanceApp .vmPage .detailView .tabPanels .panel .topTips {
    margin-bottom: 0;
    clear: both;
    padding-top: 10px;
    background-color: #e5f7fa;
    border: 1px solid #51c4d4;
    padding: 7px 12px;
    line-height: 20px;
    font-size: 12px;
    color: #252f3d;
    border-radius: 2px
}

.instanceApp .vmPage .detailView .tabPanels .panel .topTips.alt {
    margin-top: 0;
    margin-bottom: 16px
}

.instanceApp .vmPage .detailView .tabPanels .panel .buttons {
    display: inline-block;
    margin: 18px 10px
}

.instanceApp .vmPage .detailView .tabPanels .panel .buttons .button {
    display: inline-block;
    background-color: #00afc8;
    padding: 0 12px;
    border-radius: 2px;
    height: 30px;
    line-height: 30px;
    float: left;
    clear: both;
    font-size: 12px;
    color: #fff
}

.instanceApp .vmPage .detailView .tabPanels .panel .buttons .button:hover {
    background-color: #00a5bd
}

.instanceApp .vmPage .detailView .tabPanels .panel .buttons .button:active {
    background-color: #009bb1
}

.instanceApp .vmPage .detailView .tabPanels .panel .buttons .button.disabled {
    background-color: #d9e3e5!important;
    color: #a8b3be;
    cursor: not-allowed
}

.instanceApp .vmPage .detailView .tabPanels .panel .buttons .button[field="remove"] {
    background-color: #e05c69
}

.instanceApp .vmPage .detailView .tabPanels .panel .buttons .button[field="remove"]:hover {
    background-color: #d6505c
}

.instanceApp .vmPage .detailView .tabPanels .panel .buttons .button[field="remove"]:active {
    background-color: #cd4855
}

.instanceApp .vmPage .detailView .tabPanels .panel .button-add {
    background-color: #00afc8;
    color: #fff;
    display: block;
    padding: 0 12px;
    border-radius: 2px;
    height: 30px;
    line-height: 30px;
    float: left;
    clear: both;
    margin: 18px 0;
    font-size: 12px
}

.instanceApp .vmPage .detailView .tabPanels .panel .button-add:hover {
    background-color: #00a5bd
}

.instanceApp .vmPage .detailView .tabPanels .panel .button-add:active {
    background-color: #009bb1
}

.instanceApp .vmPage .detailView .tabPanels .panel .button-add.disabled {
    background-color: #d9e3e5!important;
    color: #a8b3be;
    cursor: not-allowed
}

.instanceApp .vmPage .detailView .tabPanels .panel .templateList {
    clear: both;
    overflow: hidden;
    padding-right: 8px
}

.instanceApp .vmPage .detailView .tabPanels .panel .templateList a {
    background-color: #eef3f6;
    border: 1px solid #eef3f6;
    color: #444;
    border-radius: 2px;
    width: 105px;
    display: block;
    float: left;
    text-align: center;
    margin-right: 12px;
    margin-top: 11px;
    height: 28px;
    line-height: 28px
}

.instanceApp .vmPage .detailView .tabPanels .panel .templateList a:hover {
    background-color: #b9f1f9;
    border-color: #b9f1f9
}

.instanceApp .vmPage .detailView .tabPanels .panel .templateList a:active {
    background-color: #5cd0e0;
    border-color: #5cd0e0
}

.instanceApp .vmPage .detailView .tabPanels .panel .templateList a.disabled {
    opacity: 0.8;
    cursor: not-allowed
}

.instanceApp .vmPage .detailView .tabPanels .panel .templateList a.disabled:hover {
    background-color: #eef3f6
}

.instanceApp .vmPage .detailView .tabPanels .panel .templateList a.disabled:active {
    background-color: #eef3f6
}

.instanceApp .vmPage .detailView .tabPanels .panel .templateList a.selected,
.instanceApp .vmPage .detailView .tabPanels .panel .templateList a.selected:hover,
.instanceApp .vmPage .detailView .tabPanels .panel .templateList a.selected:active {
    background-color: #00afc8;
    color: #fff;
    border-color: #00afc8
}

.instanceApp .vmPage .detailView .tabPanels .panel .table {
    border-spacing: 0;
    width: 100%;
    font-size: 12px;
    border-bottom: 1px solid #eee
}

.instanceApp .vmPage .detailView .tabPanels .panel .table input:not([type="checkbox"]),
.instanceApp .vmPage .detailView .tabPanels .panel .table select {
    font-size: 12px;
    margin: 0;
    max-height: 28px;
    line-height: 18px;
    background-position: right -71px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table th {
    text-align: left;
    color: #444;
    font-weight: normal;
    padding: 0 20px;
    border-bottom: 1px solid #ecf0f2
}

.instanceApp .vmPage .detailView .tabPanels .panel .table th,
.instanceApp .vmPage .detailView .tabPanels .panel .table td {
    line-height: 28px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical {
    border-bottom: none
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td {
    color: #252f3d;
    padding-left: 20px;
    line-height: 18px;
    padding: 5px 0 5px 20px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName {
    position: relative;
    top: -6px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName input {
    display: none
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName a.edit {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: url("/static/modules/apps/instance/i/icon-edit.png") 0 -19px no-repeat;
    background-size: 16px 35px;
    margin-left: 5px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName a.confirm,
.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName a.cancel {
    display: none
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName.editMode {
    top: -8px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName.editMode input {
    display: inline-block
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName.editMode span {
    display: none
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName.editMode a.edit {
    display: none
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName.editMode a.confirm,
.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName.editMode a.cancel {
    display: inline-block;
    background: transparent url("/static/modules/apps/instance/i/icon-add-remove.png") -94px center no-repeat;
    width: 18px;
    height: 16px;
    cursor: pointer;
    background-size: 184px 16px;
    margin-left: 5px;
    position: relative;
    top: 6px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName.editMode a.confirm:hover,
.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName.editMode a.cancel:hover {
    background-position: -142px center
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName.editMode a.cancel {
    background: transparent url("/static/modules/apps/instance/i/icon-add-remove.png") -118px center no-repeat;
    width: 18px;
    height: 16px;
    cursor: pointer;
    background-size: 184px 16px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td .editName.editMode a.cancel:hover {
    background-position: -166px center
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td li {
    width: 240px;
    padding-right: 27px;
    line-height: 28px;
    min-height: 28px;
    border-radius: 2px;
    position: relative
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td li select {
    max-width: 90px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td li .icon-close {
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 67px;
    position: absolute;
    right: 28px;
    top: 4px;
    visibility: hidden
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td li .icon-close:hover {
    background-position: 0 -17px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td li .icon-plus {
    width: 16px;
    height: 16px;
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 -34px no-repeat;
    background-size: 16px 67px;
    cursor: pointer;
    right: 4px;
    top: 4px;
    position: absolute
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td li .icon-plus:hover {
    background-position: 0 bottom
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td li .icon-loading {
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat;
    position: relative;
    top: -2px;
    vertical-align: middle;
    border: none;
    cursor: default;
    right: 28px;
    top: 4px;
    position: absolute
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td li .icon-loading:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td li:last-child {
    border-bottom: 1px solid #f0f0f0
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td li:hover .icon-close {
    visibility: visible
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td.th {
    color: #738293;
    vertical-align: top;
    text-align: right;
    padding-left: 0;
    width: 100px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td i.unaccepted {
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    margin-right: 5px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 -60px no-repeat;
    background-size: 15px 90px;
    position: relative
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.vertical tbody td i.accepted {
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    margin-right: 5px;
    background: url("/static/modules/apps/instance/i/status/icon-status-volume-in-use.png") 0 bottom no-repeat;
    background-position: 0 bottom;
    background-size: contain;
    position: relative
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal {
    border-bottom: none;
    clear: both
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal .noData {
    height: 36px;
    line-height: 36px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal thead th {
    color: #787878;
    line-height: 28px;
    font-weight: 500;
    text-align: left;
    padding: 0 20px;
    border-bottom: 1px solid #ecf0f2
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody tr:hover {
    background: #e1f4f7
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody tr:hover td>a[class^="action-"],
.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody tr:hover td>a.action {
    position: relative
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody tr.noData:hover {
    background-color: transparent
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody tr.noData td {
    color: #a8b3be
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody tr.operationRow:hover {
    background: transparent
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody tr.operationRow td {
    padding-bottom: 5px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td {
    color: #444444;
    line-height: 28px;
    padding: 0 20px;
    border-bottom: 1px solid #ecf0f2
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .icon-close {
    font-size: 7px;
    padding: 10.5px;
    color: #adadad;
    cursor: pointer
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .icon-close:hover {
    color: #1fcae7
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td.td-verify {
    padding-right: 0
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .verifying {
    color: #a8b3be
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td>a[class^="action-"] {
    display: inline-block;
    margin-right: 5px;
    margin-top: 10px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .action-connect {
    width: 16px;
    height: 16px;
    background: url("/static/modules/apps/instance/i/icon-detach.png") 0 2px no-repeat;
    background-size: 16px 32px;
    cursor: pointer
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .action-connect:hover {
    background-position: 0 -17px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .action-connect[field="disconnect"] {
    width: 16px;
    height: 16px;
    background: url("/static/modules/apps/instance/i/icon-attach.png") 0 2px no-repeat;
    background-size: 16px 32px;
    cursor: pointer
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .action-connect[field="disconnect"]:hover {
    background-position: 0 -17px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .action-delete {
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 67px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .action-delete:hover {
    background-position: 0 -17px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .action-resend {
    float: right;
    margin-top: 8px !important;
    background: url("/static/modules/apps/instance/i/icon-notification@2x.png") 0 1px no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 76px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .action-resend:hover {
    background-position: 0 -18px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .action-resend.sms {
    background-position: 0 -38px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .action-resend.sms:hover {
    background-position: 0 -60px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .icon-plus {
    font-size: 15px;
    padding: 6.5px;
    color: #95CE1E;
    cursor: pointer
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td>a.action {
    display: inline-block;
    margin-right: 16px;
    position: relative;
    top: 5px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .statusActive {
    padding-left: 20px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 0 no-repeat;
    background-size: 15px 90px;
    line-height: 15px;
    height: 15px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td .statusDown {
    padding-left: 20px;
    background: url("/static/modules/apps/instance/i/icon-status.png") 0 -45px no-repeat;
    background-size: 15px 90px;
    line-height: 15px;
    height: 15px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td input {
    width: 90px;
    margin-right: 12px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td input.error {
    border: 1px solid #e05c69
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td input[type="checkbox"] {
    width: 16px;
    margin-top: 0
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td select {
    width: 90px;
    margin-right: 12px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td select.full-width {
    width: 100%
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody td:last-child {
    padding: 0 3px 0 20px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody .operation td {
    padding: 0 9px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.horizontal tbody .operation td:last-child {
    padding: 0 3px 0 20px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController {
    margin-top: 10px;
    width: 414px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.th {
    padding-top: 10px;
    height: 14px;
    padding-left: 16px;
    text-align: left;
    color: #252f3d;
    font-size: 12px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.th .line {
    position: relative;
    height: 14px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.th .line>div {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    display: inline-block;
    padding-right: 12px;
    background-color: #fff;
    z-index: 2;
    height: 14px;
    line-height: 14px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.th .line:before {
    content: "";
    left: 0;
    right: 30px;
    top: 50%;
    height: 1px;
    background-color: #e7ebed;
    display: block;
    position: absolute
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.th .line a.add {
    width: 16px;
    height: 16px;
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 -34px no-repeat;
    background-size: 16px 67px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -8px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.th .line a.add:hover {
    background-position: 0 bottom
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.th .line a.add.disabled {
    opacity: 0.7;
    cursor: not-allowed
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.th .line a.add.disabled:hover {
    background-position: 0 -34px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list {
    padding-left: 16px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li {
    padding-left: 8px;
    margin-right: 30px;
    width: auto;
    line-height: 12px;
    min-height: 12px;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    position: relative
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li:last-child {
    border-bottom: none
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li:hover {
    background-color: #e1f4f7
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li:hover .icon-edit,
.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li:hover .icon-close {
    visibility: visible
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li .icon-edit {
    display: block;
    background: url("/static/modules/apps/instance/i/icon-edit.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 35px;
    right: 38px;
    top: 50%;
    position: absolute;
    margin-right: 0;
    margin-top: -8px;
    visibility: hidden
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li .icon-edit:hover {
    background-position: 0 -22px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li .icon-close {
    display: block;
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 67px;
    right: 12px;
    top: 50%;
    position: absolute;
    margin-right: 0;
    margin-top: -8px;
    visibility: hidden
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li .icon-close:hover {
    background-position: 0 -17px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li .icon-loading {
    display: block;
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat;
    position: relative;
    top: -2px;
    vertical-align: middle;
    border: none;
    right: 12px;
    top: 50%;
    position: absolute;
    margin-right: 0;
    margin-top: -10px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li .icon-loading:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li.header {
    line-height: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e7ebed
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li.header:hover {
    background-color: #fff
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li.empty {
    color: #a8b3be
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li.empty:hover {
    background-color: #fff
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li label.size {
    float: right;
    display: inline-block;
    margin-right: 5px;
    line-height: 17px
}

.instanceApp .vmPage .detailView .tabPanels .panel .table.listController tbody tr td.list ul li span {
    display: inline-block;
    width: 110px;
    line-height: 17px
}

.instanceApp .vmPage .detailView .tabPanels .panelPh {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%)
}

.instanceApp .vmPage .activeLabel {
    color: #1eb9a5
}

.instanceApp .vmPage .deletedLabel {
    color: #e05c69
}

.instanceApp .vmPage .detailMoreActionDropDown,
.instanceApp .vmPage .moreActionDropDown {
    position: absolute;
    top: 46px;
    left: 157px;
    min-width: 135px;
    background-color: #fff;
    z-index: 100;
    border: 1px solid #ddd;
    padding: 10px 0;
    border-radius: 2px;
    box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.12)
}

.instanceApp .vmPage .detailMoreActionDropDown:before,
.instanceApp .vmPage .moreActionDropDown:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background-color: #00afc8;
    content: ""
}

.instanceApp .vmPage .detailMoreActionDropDown>div:last-child,
.instanceApp .vmPage .moreActionDropDown>div:last-child {
    border-bottom: none
}

.instanceApp .vmPage .detailMoreActionDropDown>div:last-child:after,
.instanceApp .vmPage .moreActionDropDown>div:last-child:after {
    display: none
}

.instanceApp .vmPage .detailMoreActionDropDown>div h4,
.instanceApp .vmPage .moreActionDropDown>div h4 {
    display: none
}

.instanceApp .vmPage .detailMoreActionDropDown>div ul,
.instanceApp .vmPage .moreActionDropDown>div ul {
    border-bottom: 1px solid #dcdcdc
}

.instanceApp .vmPage .detailMoreActionDropDown>div ul li a,
.instanceApp .vmPage .moreActionDropDown>div ul li a {
    color: #252f3d;
    font-size: 12px;
    display: block;
    padding: 0 20px;
    height: 30px;
    line-height: 30px
}

.instanceApp .vmPage .detailMoreActionDropDown>div ul li a:hover,
.instanceApp .vmPage .moreActionDropDown>div ul li a:hover {
    text-decoration: none;
    background-color: #b9f1f9
}

.instanceApp .vmPage .detailMoreActionDropDown>div ul li a[field="delete"]:hover,
.instanceApp .vmPage .moreActionDropDown>div ul li a[field="delete"]:hover {
    background-color: #fdc4c8
}

.instanceApp .vmPage .detailMoreActionDropDown>div ul li a[field="delete_item"]:hover,
.instanceApp .vmPage .moreActionDropDown>div ul li a[field="delete_item"]:hover {
    background-color: #fdc4c8
}

.instanceApp .vmPage .detailMoreActionDropDown>div ul li a.disabled,
.instanceApp .vmPage .moreActionDropDown>div ul li a.disabled {
    color: #a8b3be;
    cursor: not-allowed
}

.instanceApp .vmPage .detailMoreActionDropDown>div ul li a.disabled:hover,
.instanceApp .vmPage .moreActionDropDown>div ul li a.disabled:hover,
.instanceApp .vmPage .detailMoreActionDropDown>div ul li a.disabled:active,
.instanceApp .vmPage .moreActionDropDown>div ul li a.disabled:active {
    background-color: transparent
}

.instanceApp .vmPage .detailMoreActionDropDown>div ul:last-child,
.instanceApp .vmPage .moreActionDropDown>div ul:last-child {
    border-bottom: none
}

.instanceApp .vmPage .detailMoreActionDropDown>div:after,
.instanceApp .vmPage .moreActionDropDown>div:after {
    content: "";
    height: 5px;
    border-bottom: 1px solid #dcdcdc;
    display: block;
    margin: 0 16px 5px
}

.instanceApp .vmPage .moreActionDetailDropDown {
    position: absolute;
    top: 100px;
    right: 20px
}

.instanceApp .vmPage .disabledLink {
    color: #738293;
    cursor: not-allowed
}

.instanceApp .vmPage [class^="icon-"] {
    display: inline-block;
    background: url(/static/public/css/utils/images/menu_icon_v8.png) 0 0 no-repeat;
    background-size: 941px 40px;
    height: 17px;
    width: 17px;
    margin-right: 3px;
    vertical-align: middle
}

.instanceApp .vmPage [class^="icon-"].vpn {
    background-position: 1px 0
}

.instanceApp .vmPage [class^="icon-"].security {
    background-position: -25px 0
}

.instanceApp .vmPage [class^="icon-"].volume {
    background-position: -51px 2px
}

.instanceApp .vmPage [class^="icon-"].lb {
    background-position: -76px 0
}

.instanceApp .vmPage [class^="icon-"].overview {
    background-position: -103px 0
}

.instanceApp .vmPage [class^="icon-"].ip {
    background-position: -128px 0
}

.instanceApp .vmPage [class^="icon-"].network {
    background-position: -153px 3px
}

.instanceApp .vmPage [class^="icon-"].subnet {
    background-position: -436px 2px
}

.instanceApp .vmPage [class^="icon-"].image,
.instanceApp .vmPage [class^="icon-"].snap-image {
    background-position: -179px 0
}

.instanceApp .vmPage [class^="icon-"].snapshot {
    background-position: -205px 1px
}

.instanceApp .vmPage [class^="icon-"].router {
    background-position: -231px 0
}

.instanceApp .vmPage [class^="icon-"].key-pair {
    background-position: -256px 1px
}

.instanceApp .vmPage [class^="icon-"].interface {
    background-position: -283px 2px
}

.instanceApp .vmPage [class^="icon-"].topology {
    background-position: -309px 0
}

.instanceApp .vmPage [class^="icon-"].instance {
    background-position: -334px 1px
}

.instanceApp .vmPage [class^="icon-"].record {
    background-position: -361px 3px
}

.instanceApp .vmPage [class^="icon-"].ticket {
    background-position: -387px 0
}

.instanceApp .vmPage [class^="icon-"].operation {
    background-position: -412px 0
}

.instanceApp .vmPage [class^="icon-"].monitor {
    background-position: -463px 2px
}

.instanceApp .vmPage [class^="icon-"].alarm {
    background-position: -463px 2px
}

.instanceApp .vmPage [class^="icon-"].notification {
    background-position: -489px 2px
}

.instanceApp .vmPage [class^="icon-"].account {
    background-position: -540px 0
}

.instanceApp .vmPage [class^="icon-"].project {
    background-position: -515px 0
}

.instanceApp .vmPage [class^="icon-"].role {
    background-position: -567px 0
}

.instanceApp .vmPage [class^="icon-"].record_overview {
    background-position: -592px 3px
}

.instanceApp .vmPage [class^="icon-"].account_charge {
    background-position: -619px 0
}

.instanceApp .vmPage [class^="icon-"].collaboration {
    background-position: -645px 0
}

.instanceApp .vmPage [class^="icon-"].account_record {
    background-position: -671px 0
}

.instanceApp .vmPage [class^="icon-"].listener {
    background-position: -695px 0
}

.instanceApp .vmPage [class^="icon-"].file-sharing {
    background-position: -718px 1px
}

.instanceApp .vmPage [class^="icon-"].share {
    background-position: -718px 1px
}

.instanceApp .vmPage [class^="icon-"].pool {
    background-position: -745px 2px
}

.instanceApp .vmPage [class^="icon-"].network-sharing {
    background-position: -771px 0
}

.instanceApp .vmPage [class^="icon-"].invoice {
    background-position: -823px 0
}

.instanceApp .vmPage [class^="icon-"].app-center {
    background-position: -925px 0
}

.instanceApp .vmPage .icon-security {
    background-position: -26px 0
}

.instanceApp .vmPage .icon-ip {
    background-position: -129px 0
}

.instanceApp .vmPage .icon-interface {
    background-position: -283px 0
}

.instanceApp .vmPage .icon-instance {
    background-position: -335px 0
}

.instanceApp .vmPage .icon-volume {
    background-position: -51px 2px
}

.instanceApp .vmPage .icon-keypair {
    background-position: -256px 0
}

.instanceApp .vmPage .icon-router {
    background-position: -231px 0
}

.instanceApp .vmPage .icon-network {
    background-position: -153px 3px
}

.instanceApp .vmPage .icon-subnet {
    background-position: -437px 0
}

.instanceApp .vmPage .icon-snapshot {
    background-position: -205px 1px
}

.instanceApp .vmPage .icon-notification {
    background-position: -489px 2px
}

.instanceApp .vmPage .icon-account {
    background-position: -540px 0
}

.instanceApp .vmPage .icon-project {
    background-position: -515px 0
}

.instanceApp .vmPage .icon-role {
    background-position: -567px 0
}

.instanceApp .vmPage .icon-file-sharing {
    background-position: -718px 1px
}

.instanceApp .vmPage .icon-pool,
.instanceApp .vmPage .icon-resource_pool {
    background-position: -745px 2px
}

.instanceApp .vmPage .icon-network-sharing {
    background-position: -771px 0
}

.instanceApp .vmPage .icon-lb {
    background-position: -76px 0
}

.instanceApp .vmPage .icon-listener {
    background-position: -695px 0
}

.instanceApp .haveTab .moreActionDropDown {
    top: 94px
}

.instanceApp .uosPage .publicFow {
    background: url("/static/modules/apps/instance/i/icon-public-network.png") 0 0 no-repeat;
    width: 98px;
    height: 78px;
    background-size: contain;
    position: relative;
    margin-left: -49px;
    display: none
}

.instanceApp .uosPage .topologyCanvasInner image.loading {
    display: block;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.instanceApp .uosPage .flowoute {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 300px;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    min-height: 100px;
    z-index: 100;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.15)
}

.instanceApp .uosPage .flowoute:before {
    position: absolute;
    content: "";
    left: 20px;
    top: -8px;
    background: url("/static/modules/apps/instance/i/topology/background.png") 0 0 no-repeat;
    width: 16px;
    height: 12px
}

.instanceApp .uosPage .flowoute.revert:before {
    left: auto;
    right: 20px
}

.instanceApp .uosPage .flowoute.back:before {
    top: auto;
    bottom: -8px;
    -webkit-transform: scale(-1, -1);
    -moz-transform: scale(-1, -1);
    transform: scale(-1, -1)
}

.instanceApp .uosPage .flowoute h1 {
    font-size: 16px;
    line-height: 30px;
    padding: 0 18px;
    margin: 0;
    color: #323232;
    border-bottom: 1px solid #e6e6e6;
    font-weight: normal
}

.instanceApp .uosPage .flowoute .content {
    padding-top: 6px
}

.instanceApp .uosPage .flowoute .content div {
    padding: 0 12px;
    clear: both;
    overflow: hidden;
    font-size: 12px;
    line-height: 19px
}

.instanceApp .uosPage .flowoute .content div label {
    float: left;
    display: block;
    margin-bottom: 5px;
    padding-right: 10px;
    width: 65px;
    text-align: right;
    color: #738293
}

.instanceApp .uosPage .flowoute .content div i.image-icon-default {
    margin-top: 0
}

.instanceApp .uosPage .flowoute .content div span {
    color: #252f3d
}

.instanceApp .uosPage .flowoute .content div span[class^="status-"] {
    display: block;
    padding-left: 20px;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    float: left;
    text-transform: capitalize
}

.instanceApp .uosPage .flowoute .content div span[class^="status-"].status-active {
    background-image: url("/static/modules/apps/instance/i/status/icon-status-active.png")
}

.instanceApp .uosPage .flowoute .content div span[class^="status-"].status-suspended,
.instanceApp .uosPage .flowoute .content div span[class^="status-"].status-down {
    background-image: url("/static/modules/apps/instance/i/status/icon-status-pause.png")
}

.instanceApp .uosPage .flowoute .content div span[class^="status-"].status-shutoff {
    background-image: url("/static/modules/apps/instance/i/status/icon-status-stop.png")
}

.instanceApp .uosPage .flowoute .content div span[class^="status-"].status-error {
    background-image: url("/static/modules/apps/instance/i/status/icon-status-error.png")
}

.instanceApp .uosPage .flowoute .content div span[class^="image-"] {
    display: block;
    padding-left: 20px;
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    float: left
}

.instanceApp .uosPage .flowoute .content div span[class^="image-"].image-default {
    background-image: url("/static/modules/apps/instance/i/images/single-icon/image_default.png")
}

.instanceApp .uosPage .flowoute .content div.floatingIPList label,
.instanceApp .uosPage .flowoute .content div.subnetList label,
.instanceApp .uosPage .flowoute .content div.portsList label {
    height: 20px
}

.instanceApp .uosPage .flowoute .content div.floatingIPList ul,
.instanceApp .uosPage .flowoute .content div.subnetList ul,
.instanceApp .uosPage .flowoute .content div.portsList ul {
    float: left
}

.instanceApp .uosPage .flowoute .content div.floatingIPList ul li,
.instanceApp .uosPage .flowoute .content div.subnetList ul li,
.instanceApp .uosPage .flowoute .content div.portsList ul li {
    position: relative;
    padding-right: 50px;
    line-height: 19px;
    height: 19px
}

.instanceApp .uosPage .flowoute .content div.floatingIPList ul li .icon-close,
.instanceApp .uosPage .flowoute .content div.subnetList ul li .icon-close,
.instanceApp .uosPage .flowoute .content div.portsList ul li .icon-close {
    background: url("/static/modules/apps/instance/i/icon-add-delete.png") 0 0 no-repeat;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-size: 16px 67px;
    position: relative;
    top: -1px;
    margin-left: 5px;
    display: inline-block
}

.instanceApp .uosPage .flowoute .content div.floatingIPList ul li .icon-close:hover,
.instanceApp .uosPage .flowoute .content div.subnetList ul li .icon-close:hover,
.instanceApp .uosPage .flowoute .content div.portsList ul li .icon-close:hover {
    background-position: 0 -17px
}

.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"],
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] {
    padding-right: 0
}

.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] a,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i {
    float: left;
    display: block
}

.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] i,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] i {
    position: relative;
    top: 2px
}

.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] .icon-close,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] .icon-close {
    top: 0;
    float: right
}

.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.subnetList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.floatingIPList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.subnetList ul li[type="listener"] span,
.instanceApp .uosPage .flowoute .content div.portsList ul li[type="subnet"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="port"] .instanceApp .uosPage .flowoute .content div.portsList ul li[type="listener"] span {
    padding-left: 5px;
    padding-right: 5px
}

.instanceApp .uosPage .flowoute .buttons {
    margin: 0!important;
    padding: 8px 12px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center
}

.instanceApp .uosPage .flowoute .buttons a.btn {
    background-color: #00afc8;
    font-size: 12px;
    color: #fff;
    line-height: 20px;
    height: 20px;
    padding: 0 8px;
    margin-right: 6px;
    display: inline-block;
    border-radius: 2px
}

.instanceApp .uosPage .flowoute .buttons a.btn:hover {
    background-color: #00a5c1
}

.instanceApp .uosPage .flowoute .buttons a.btn:active {
    background-color: #019cb4
}

.instanceApp .uosPage .flowoute .buttons a.btn.delete {
    background-color: #e05c69;
    margin-right: 0
}

.instanceApp .uosPage .flowoute .buttons a.btn.delete:hover {
    background-color: #d6505c
}

.instanceApp .uosPage .flowoute .buttons a.btn.delete:active {
    background-color: #cd4855
}

.instanceApp .uosPage .flowoute .buttons a.btn:last-child {
    margin-right: 0
}

.instanceApp .loadingIndicator {
    position: absolute;
    right: 0;
    top: 0;
    background-color: red;
    width: 30px;
    height: 30px;
    display: none!important;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") center center no-repeat;
    vertical-align: middle;
    border: none
}

.instanceApp .loadingIndicator:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 5px;
    top: 5px;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

.promptDialog,
.vmModal {
    overflow: hidden;
    height: auto
}

.promptDialog#change_pwd_pop_model .panel,
.vmModal#change_pwd_pop_model .panel {
    padding-top: 31px;
    padding-bottom: 30px
}

.promptDialog.narrow,
.vmModal.narrow {
    width: 550px
}

.promptDialog.narrow .panel,
.vmModal.narrow .panel {
    height: auto;
    padding-bottom: 16px;
    max-height: 420px;
    overflow-y: auto
}

.promptDialog.narrow .panel .row,
.vmModal.narrow .panel .row {
    position: relative;
    overflow: visible;
    margin-left: 70px;
    margin-bottom: 10px
}

.promptDialog.narrow .panel .row>label,
.vmModal.narrow .panel .row>label {
    position: absolute;
    display: block;
    left: -95px;
    width: 90px;
    top: 0;
    bottom: 0;
    text-align: right
}

.promptDialog.narrow .panel .row>label strong,
.vmModal.narrow .panel .row>label strong {
    font-weight: normal;
    color: red;
    font-size: 14px;
    position: relative;
    top: 3px;
    left: -3px
}

.promptDialog.narrow .panel .row>input[type="text"],
.vmModal.narrow .panel .row>input[type="text"],
.promptDialog.narrow .panel .row>input[type="password"],
.vmModal.narrow .panel .row>input[type="password"],
.promptDialog.narrow .panel .row>select.select,
.vmModal.narrow .panel .row>select.select,
.promptDialog.narrow .panel .row textarea,
.vmModal.narrow .panel .row textarea {
    display: block;
    width: 100%
}

.promptDialog.narrow .panel .row>select.select.groupselect2,
.vmModal.narrow .panel .row>select.select.groupselect2 {
    width: 280px;
    display: inline-block
}

.promptDialog.narrow .panel .row>a.add,
.vmModal.narrow .panel .row>a.add {
    display: inline-block;
    margin-left: 10px;
    color: #626f7e;
    padding: 1px 10px;
    background-color: #ecf0f2;
    border-radius: 2px
}

.promptDialog.narrow .panel .row>a.add:hover,
.vmModal.narrow .panel .row>a.add:hover {
    background-color: #d4dadc
}

.promptDialog.narrow .panel .row>a.add:active,
.vmModal.narrow .panel .row>a.add:active {
    background-color: #c7cfd2
}

.promptDialog.narrow .panel .row .select,
.vmModal.narrow .panel .row .select {
    line-height: 27px
}

.promptDialog.narrow .panel .row .emptyTextLabel,
.vmModal.narrow .panel .row .emptyTextLabel {
    color: #a8b3be;
    display: inline-block;
    line-height: 27px
}

.promptDialog.narrow .panel .row textarea,
.vmModal.narrow .panel .row textarea {
    height: 100px;
    font-family: Arial, Helvetica;
    resize: none
}

.promptDialog.narrow .panel .row>input[type="checkbox"],
.vmModal.narrow .panel .row>input[type="checkbox"] {
    margin: 5px 0 0 5px;
    display: block
}

.promptDialog.narrow .panel .row .navigator,
.vmModal.narrow .panel .row .navigator {
    overflow: hidden
}

.promptDialog.narrow .panel .row .navigator>li,
.vmModal.narrow .panel .row .navigator>li {
    float: left;
    width: 122px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    padding: 0 10px;
    border: 1px solid transparent;
    margin-right: 13px;
    border-radius: 2px;
    background-color: #ecf0f2
}

.promptDialog.narrow .panel .row .navigator>li:hover,
.vmModal.narrow .panel .row .navigator>li:hover {
    background-color: #b9f1f9;
    border-color: #b9f1f9
}

.promptDialog.narrow .panel .row .navigator>li.selected,
.vmModal.narrow .panel .row .navigator>li.selected {
    border-color: #5cd0e0;
    background-color: #5cd0e0
}

.promptDialog.narrow .panel .row .navigator>li.selected a,
.vmModal.narrow .panel .row .navigator>li.selected a {
    color: #252f3d
}

.promptDialog.narrow .panel .row .navigator>li a,
.vmModal.narrow .panel .row .navigator>li a {
    display: block;
    color: #5b6775
}

.promptDialog.narrow .panel .row.rowTabs,
.vmModal.narrow .panel .row.rowTabs {
    height: 36px;
    line-height: 36px
}

.promptDialog.narrow .panel .row.rowTabs .btn,
.vmModal.narrow .panel .row.rowTabs .btn {
    display: inline-block;
    min-width: 150px;
    border: 1px solid transparent;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 10px;
    font-size: 12px;
    height: 34px;
    line-height: 34px;
    border-radius: 2px;
    color: #5b6775;
    background-color: #ecf0f2;
    border-color: #ecf0f2;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    margin-right: 10px
}

.promptDialog.narrow .panel .row.rowTabs .btn i,
.vmModal.narrow .panel .row.rowTabs .btn i {
    margin-right: 10px
}

.promptDialog.narrow .panel .row.rowTabs .btn:hover,
.vmModal.narrow .panel .row.rowTabs .btn:hover {
    color: #5b6775;
    background-color: #b9f1f9;
    border-color: #b9f1f9
}

.promptDialog.narrow .panel .row.rowTabs .btn.selected,
.vmModal.narrow .panel .row.rowTabs .btn.selected {
    color: #252f3d;
    background-color: #5cd0e0;
    border-color: #5cd0e0
}

.promptDialog.narrow .panel .row.linkRow,
.vmModal.narrow .panel .row.linkRow {
    clear: both;
    margin-bottom: 0
}

.promptDialog.narrow .panel .row.rowCustom,
.vmModal.narrow .panel .row.rowCustom {
    min-height: 32px;
    height: auto
}

.promptDialog.narrow .panel .row.rowCustom div.templateList a,
.vmModal.narrow .panel .row.rowCustom div.templateList a {
    width: 97px;
    text-align: center;
    float: left;
    margin-right: 10px;
    padding: 4px 12px
}

.promptDialog.narrow .panel .row.rowCustom div.templateList a:nth-child(3n),
.vmModal.narrow .panel .row.rowCustom div.templateList a:nth-child(3n) {
    margin-right: 0
}

.promptDialog.narrow .panel .row.rowCustom div.templateList a.selected,
.vmModal.narrow .panel .row.rowCustom div.templateList a.selected {
    background-color: #5cd0e0;
    color: #000
}

.promptDialog.narrow .panel .row.rowCustom>div input[type="radio"],
.vmModal.narrow .panel .row.rowCustom>div input[type="radio"] {
    margin: 7px 5px 0 0;
    display: block;
    float: left
}

.promptDialog.narrow .panel .row.rowCustom>div .select,
.vmModal.narrow .panel .row.rowCustom>div .select {
    float: left;
    display: block
}

.promptDialog.narrow .panel .row.rowCustom>div a,
.vmModal.narrow .panel .row.rowCustom>div a {
    background-color: #ecf0f2;
    color: #566775;
    line-height: 24px;
    padding: 4px 36px 4px 12px;
    border-radius: 2px;
    display: block;
    margin-bottom: 8px
}

.promptDialog.narrow .panel .row.rowCustom>div a:hover,
.vmModal.narrow .panel .row.rowCustom>div a:hover {
    background-color: #b9f1f9
}

.promptDialog.narrow .panel .row.rowCustom>div a:active,
.vmModal.narrow .panel .row.rowCustom>div a:active {
    background-color: #5cd0e0
}

.promptDialog.narrow .panel .row.rowCustom>div a .rightPart,
.vmModal.narrow .panel .row.rowCustom>div a .rightPart {
    float: right
}

.promptDialog.narrow .panel .row.rowCustom>div .selected,
.vmModal.narrow .panel .row.rowCustom>div .selected {
    background-color: transparent
}

.promptDialog.narrow .panel .row.rowCustom>div .selected a,
.vmModal.narrow .panel .row.rowCustom>div .selected a {
    position: relative;
    color: #252f3d;
    background-color: #5cd0e0
}

.promptDialog.narrow .panel .row.rowCustom>div .selected a:before,
.vmModal.narrow .panel .row.rowCustom>div .selected a:before {
    position: absolute;
    background: url(/static/public/img/icon-checkmark.png) 0 0 no-repeat;
    background-size: 14px 14px;
    display: block;
    width: 14px;
    height: 14px;
    content: "";
    top: 9px;
    right: 9px
}

.promptDialog.narrow .panel .row.rowCustom>div .selected.attached a,
.vmModal.narrow .panel .row.rowCustom>div .selected.attached a {
    background-color: #1eb9a5
}

.promptDialog.narrow .panel .row.rowCustom>div .selected.errors a,
.vmModal.narrow .panel .row.rowCustom>div .selected.errors a {
    background-color: #ff8a8a
}

.promptDialog.narrow .panel .row.rowCustom>div .radioBox,
.vmModal.narrow .panel .row.rowCustom>div .radioBox {
    clear: both;
    position: relative;
    top: -5px
}

.promptDialog.narrow .panel .row.rowCustom>div .radioBox a,
.vmModal.narrow .panel .row.rowCustom>div .radioBox a {
    background-color: transparent;
    color: #00afc8;
    display: inline;
    float: right;
    padding-right: 0;
    margin: 0
}

.promptDialog.narrow .panel .row.rowCustom>div .radioBox input[type="radio"],
.vmModal.narrow .panel .row.rowCustom>div .radioBox input[type="radio"] {
    float: left;
    margin-top: 6px;
    position: relative;
    top: 6px
}

.promptDialog.narrow .panel .row.rowCustom>div .radioBox>div,
.vmModal.narrow .panel .row.rowCustom>div .radioBox>div {
    text-align: left;
    width: auto;
    float: left
}

.promptDialog.narrow .panel .row.rowCustom>div .radioBox>div input.number[type="text"],
.vmModal.narrow .panel .row.rowCustom>div .radioBox>div input.number[type="text"] {
    min-width: 40px;
    margin: 3px;
    text-align: center;
    -webkit-appearance: none;
    appearance: none
}

.promptDialog.narrow .panel .row.rowCustom>div .radioBox>div input.number[type="text"].error,
.vmModal.narrow .panel .row.rowCustom>div .radioBox>div input.number[type="text"].error {
    background-position: 0 bottom
}

.promptDialog.narrow .panel .row.rowCustom>div .radioBox>div .inputWrapper,
.vmModal.narrow .panel .row.rowCustom>div .radioBox>div .inputWrapper {
    position: relative
}

.promptDialog.narrow .panel .row.rowCustom>div .radioBox>div .inputWrapper .tp,
.vmModal.narrow .panel .row.rowCustom>div .radioBox>div .inputWrapper .tp {
    position: absolute;
    bottom: 41px;
    max-width: 300px;
    min-width: 50px;
    text-align: center;
    background-color: #f5fdfe;
    border: 1px solid #5cd0e0;
    border-radius: 5px;
    padding: 10px;
    line-height: 15px;
    left: 50%;
    transform: translate(-50%, 0) scale(1, 1);
    -moz-transform: translate(-50%, 0) scale(1, 1);
    -webkit-transform: translate(-50%, 0) scale(1, 1);
    -ms-transform: translate(-50%, 0) scale(1, 1)
}

.promptDialog.narrow .panel .row.rowCustom>div .radioBox>div .inputWrapper .tp:before,
.vmModal.narrow .panel .row.rowCustom>div .radioBox>div .inputWrapper .tp:before {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 7px;
    transform: translate(-50%, 0) scale(1, 1);
    -moz-transform: translate(-50%, 0) scale(1, 1);
    -webkit-transform: translate(-50%, 0) scale(1, 1);
    -ms-transform: translate(-50%, 0) scale(1, 1);
    background: url("/static/modules/apps/instance/i/icon-tooltips.png") 0 0 no-repeat;
    background-size: contain
}

.promptDialog.narrow .panel .row.rowCustom>div.loading,
.vmModal.narrow .panel .row.rowCustom>div.loading {
    display: inline-block;
    margin-right: 5px;
    height: 24px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 2px center no-repeat;
    position: relative;
    top: -2px;
    vertical-align: middle;
    border: none;
    padding-left: 30px
}

.promptDialog.narrow .panel .row.rowCustom>div.loading:before,
.vmModal.narrow .panel .row.rowCustom>div.loading:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 24px;
    height: 24px;
    left: 0;
    top: 0;
    position: absolute;
    background-size: contain;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.promptDialog.narrow .panel .row.rowCustom>div.loading.hide,
.vmModal.narrow .panel .row.rowCustom>div.loading.hide {
    display: none
}

.promptDialog.narrow .panel .row.rowCustom.rowSlide,
.vmModal.narrow .panel .row.rowCustom.rowSlide {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.promptDialog.narrow .panel .row.rowCustom .dragarea,
.vmModal.narrow .panel .row.rowCustom .dragarea {
    background-color: #f0f0f0;
    height: 15px;
    width: 306px;
    margin-top: 5px;
    position: relative;
    float: left
}

.promptDialog.narrow .panel .row.rowCustom .dragarea.hasInit,
.vmModal.narrow .panel .row.rowCustom .dragarea.hasInit {
    width: 283px
}

.promptDialog.narrow .panel .row.rowCustom .dragarea .thumbnail,
.vmModal.narrow .panel .row.rowCustom .dragarea .thumbnail {
    width: 1px;
    height: 11px;
    position: absolute;
    border: 5px solid #00afc8;
    border-radius: 1px;
    top: -3px;
    cursor: pointer;
    background-color: #fff
}

.promptDialog.narrow .panel .row.rowCustom .dragarea .initarea,
.vmModal.narrow .panel .row.rowCustom .dragarea .initarea {
    background-color: #00afc8;
    height: 15px;
    width: 0;
    float: left
}

.promptDialog.narrow .panel .row.rowCustom .dragarea .selectedArea,
.vmModal.narrow .panel .row.rowCustom .dragarea .selectedArea {
    background-color: #9de6f1;
    height: 15px;
    float: left;
    position: absolute;
    left: 0
}

.promptDialog.narrow .panel .row.rowCustom .dragarea.disabled .thumbnail,
.vmModal.narrow .panel .row.rowCustom .dragarea.disabled .thumbnail {
    opacity: 0.3;
    cursor: default
}

.promptDialog.narrow .panel .row.rowCustom .dragarea.disabled .initarea,
.vmModal.narrow .panel .row.rowCustom .dragarea.disabled .initarea {
    background-color: transparent
}

.promptDialog.narrow .panel .row.rowCustom .inputarea,
.vmModal.narrow .panel .row.rowCustom .inputarea {
    float: right;
    position: relative
}

.promptDialog.narrow .panel .row.rowCustom .inputarea input,
.vmModal.narrow .panel .row.rowCustom .inputarea input {
    width: 67px;
    height: 28px;
    padding-left: 5px;
    padding-right: 20px;
    -moz-box-sizing: border-box
}

.promptDialog.narrow .panel .row.rowCustom .inputarea .unit,
.vmModal.narrow .panel .row.rowCustom .inputarea .unit {
    position: absolute;
    top: 1px;
    right: 5px
}

.promptDialog.narrow .panel .row.rowCustom .inputarea .initvalue,
.vmModal.narrow .panel .row.rowCustom .inputarea .initvalue {
    position: absolute;
    right: 66px
}

.promptDialog.narrow .panel .row.rowCustom .tips,
.vmModal.narrow .panel .row.rowCustom .tips {
    clear: left;
    padding-top: 10px;
    text-align: right;
    width: 306px
}

.promptDialog.narrow .panel .row.rowCustom .tips.hasInit,
.vmModal.narrow .panel .row.rowCustom .tips.hasInit {
    width: 283px
}

.promptDialog.narrow .panel .row.rowCustom .warning,
.vmModal.narrow .panel .row.rowCustom .warning {
    font-size: 12px;
    color: #e54151;
    position: relative;
    top: -22px
}

.promptDialog.narrow .panel .row.rowCustom .radioBox input.number,
.vmModal.narrow .panel .row.rowCustom .radioBox input.number {
    text-align: center!important;
    width: 25px;
    display: inline;
    padding: 0
}

.promptDialog.narrow .panel .row.rowCustom .radioBox .hide,
.vmModal.narrow .panel .row.rowCustom .radioBox .hide {
    display: none
}

.promptDialog.narrow .panel .row.rowCustom .flag>div,
.vmModal.narrow .panel .row.rowCustom .flag>div {
    overflow: hidden
}

.promptDialog.narrow .panel .row.rowCustom .flag>div.iops,
.vmModal.narrow .panel .row.rowCustom .flag>div.iops {
    width: 400px
}

.promptDialog.narrow .panel .row.rowCustom .flag>div .label,
.vmModal.narrow .panel .row.rowCustom .flag>div .label {
    font-size: 12px;
    color: #738293
}

.promptDialog.narrow .panel .row.rowCustom .flag>div .label>span,
.vmModal.narrow .panel .row.rowCustom .flag>div .label>span {
    font-size: 12px;
    color: #a8b3be
}

.promptDialog.narrow .panel .row.rowCustom .flag>div .label>span:first-child,
.vmModal.narrow .panel .row.rowCustom .flag>div .label>span:first-child {
    display: inline-block;
    margin-left: 12px
}

.promptDialog.narrow .panel .row.rowCustom .flag>div .metric,
.vmModal.narrow .panel .row.rowCustom .flag>div .metric {
    background-color: #e2e7ea;
    height: 15px;
    width: 306px;
    float: left;
    border-radius: 2px;
    margin-right: 8px
}

.promptDialog.narrow .panel .row.rowCustom .flag>div .metric .metricSelected,
.vmModal.narrow .panel .row.rowCustom .flag>div .metric .metricSelected {
    background-color: #9de6f1;
    height: 15px;
    max-width: 306px;
    border-radius: 2px
}

.promptDialog.narrow .panel .row.rowCustom .flag>div .valueField,
.vmModal.narrow .panel .row.rowCustom .flag>div .valueField {
    color: #252f3d;
    font-size: 12px;
    float: left;
    line-height: 18px
}

.promptDialog.narrow .panel .row.rowCustom .flag>div.single .label,
.vmModal.narrow .panel .row.rowCustom .flag>div.single .label {
    color: #a8b3be
}

.promptDialog.narrow .panel .row.rowCustom .flag>div.single .label strong,
.vmModal.narrow .panel .row.rowCustom .flag>div.single .label strong {
    color: #738293
}

.promptDialog.narrow .panel .row.rowCustom .custom_filed,
.vmModal.narrow .panel .row.rowCustom .custom_filed {
    overflow: hidden
}

.promptDialog.narrow .panel .row.textRow,
.vmModal.narrow .panel .row.textRow {
    height: auto;
    line-height: 20px;
    min-height: 20px
}

.promptDialog.narrow .panel .row .tipsLink,
.vmModal.narrow .panel .row .tipsLink {
    display: inline-block;
    margin-left: 5px;
    position: relative;
    overflow: visible
}

.promptDialog.narrow .panel .row .tipsLink label,
.vmModal.narrow .panel .row .tipsLink label {
    color: white;
    background-color: #dae4e5;
    border-radius: 50%;
    display: inline-block;
    font-weight: bold;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center
}

.promptDialog.narrow .panel .row .tipsLink span,
.vmModal.narrow .panel .row .tipsLink span {
    display: none!important
}

.promptDialog.narrow .panel .row.labelRow,
.vmModal.narrow .panel .row.labelRow {
    margin-left: 0;
    line-height: 18px;
    margin-bottom: 10px
}

.promptDialog.narrow .panel .row.labelRow input[type="checkbox"],
.vmModal.narrow .panel .row.labelRow input[type="checkbox"] {
    display: inline-block;
    margin-left: 0;
    margin-right: 5px;
    margin-top: 0
}

.promptDialog.narrow .panel .row.labelRow label.checkLabel,
.vmModal.narrow .panel .row.labelRow label.checkLabel {
    position: static!important;
    display: inline!important
}

.promptDialog.narrow .panel .row.labelRow.longLabelRow,
.vmModal.narrow .panel .row.labelRow.longLabelRow {
    background-color: #e5f7fa;
    border: 1px solid #51c4d4;
    padding: 7px 12px;
    line-height: 20px;
    font-size: 12px;
    color: #252f3d;
    border-radius: 2px
}

.promptDialog.narrow .panel .row.tipsRow,
.vmModal.narrow .panel .row.tipsRow {
    margin-left: 0;
    padding: 5px 12px;
    font-size: 12px;
    background-color: #fff7ea;
    border: 1px solid #ffcd7e;
    line-height: 20px;
    clear: both
}

.promptDialog.narrow .panel .row.tipsRow strong,
.vmModal.narrow .panel .row.tipsRow strong {
    color: #ffac2a;
    font-weight: normal
}

.promptDialog.narrow .panel .row.tipsRow a,
.vmModal.narrow .panel .row.tipsRow a {
    color: #00afc8
}

.promptDialog.narrow .panel .row.billInfo,
.vmModal.narrow .panel .row.billInfo {
    float: right;
    clear: both;
    font-size: 12px
}

.promptDialog.narrow .panel .row.billInfo .chargeValue,
.vmModal.narrow .panel .row.billInfo .chargeValue {
    font-size: 18px;
    color: #f78913
}

.promptDialog.narrow .panel .row.billInfo .chargeMonth,
.vmModal.narrow .panel .row.billInfo .chargeMonth {
    margin-left: 15px;
    display: inline-block;
    font-size: 14px;
    color: #a8b3be
}

.promptDialog.narrow .panel .row.errorTips,
.vmModal.narrow .panel .row.errorTips {
    border-radius: 2px;
    padding: 7px 12px;
    line-height: 20px;
    font-size: 12px;
    border: 1px solid #e05c69;
    background-color: #fff4f4;
    clear: both;
    margin-left: 0
}

.promptDialog.narrow .panel .row .tips,
.vmModal.narrow .panel .row .tips {
    line-height: 18px;
    position: relative;
    top: 2px;
    color: #a8b3be
}

.promptDialog.narrow .panel .row .tips.error,
.vmModal.narrow .panel .row .tips.error {
    border: none;
    color: #e05c69
}

.promptDialog.narrow .panel .row .tips strong,
.vmModal.narrow .panel .row .tips strong {
    color: #ffac2a;
    font-weight: normal
}

.promptDialog.narrow .panel .row .tooltips,
.vmModal.narrow .panel .row .tooltips {
    position: absolute;
    bottom: 41px;
    width: 300px;
    background-color: #f5fdfe;
    border: 1px solid #5cd0e0;
    border-radius: 5px;
    padding: 10px;
    line-height: 15px;
    display: none;
    width: 362px
}

.promptDialog.narrow .panel .row .tooltips:before,
.vmModal.narrow .panel .row .tooltips:before {
    display: block;
    content: "";
    position: absolute;
    left: 20px;
    bottom: -7px;
    width: 12px;
    height: 7px;
    background: url("/static/modules/apps/instance/i/icon-tooltips.png") 0 0 no-repeat;
    background-size: contain
}

.promptDialog.narrow .panel>div>div.fields .row:last-child,
.vmModal.narrow .panel>div>div.fields .row:last-child {
    margin-bottom: 0
}

.promptDialog.narrow .info,
.vmModal.narrow .info {
    padding: 0 48px 10px;
    line-height: 18px
}

.promptDialog.narrow .info.error,
.vmModal.narrow .info.error {
    background-color: #fce5e6;
    border: 1px solid #d2004a;
    color: #252f3d;
    padding: 5px 12px;
    line-height: 20px;
    margin: 0 30px 10px
}

.promptDialog.narrow .buttonBar .create,
.vmModal.narrow .buttonBar .create {
    background-color: #00afc8
}

.promptDialog.narrow .buttonBar .create:hover,
.vmModal.narrow .buttonBar .create:hover {
    background-color: #00a5bd
}

.promptDialog.narrow .buttonBar .create:active,
.vmModal.narrow .buttonBar .create:active {
    background-color: #009bb1
}

.promptDialog.narrow .buttonBar .update,
.vmModal.narrow .buttonBar .update {
    width: auto
}

.promptDialog.narrow.isCreate .create,
.vmModal.narrow.isCreate .create {
    background-color: #1eb9a5
}

.promptDialog.narrow.isCreate .create:hover,
.vmModal.narrow.isCreate .create:hover {
    background-color: #09b29c
}

.promptDialog.narrow.isCreate .create:active,
.vmModal.narrow.isCreate .create:active {
    background-color: #00a993
}

.promptDialog.narrow.isCreate .create.disabled,
.vmModal.narrow.isCreate .create.disabled {
    color: #a8b3be;
    background-color: #d9e3e5!important;
    cursor: not-allowed
}

.promptDialog.narrow.isCreate .create.disabled:hover,
.vmModal.narrow.isCreate .create.disabled:hover {
    background-color: #d9e3e5
}

.promptDialog.narrow.addPop .create,
.vmModal.narrow.addPop .create {
    background-color: #00afc8
}

.promptDialog.narrow.addPop .create:hover,
.vmModal.narrow.addPop .create:hover {
    background-color: #00a5bd
}

.promptDialog.narrow.addPop .create:active,
.vmModal.narrow.addPop .create:active {
    background-color: #009bb1
}

.promptDialog.narrow.removePop .row.rowCustom>div a:hover,
.vmModal.narrow.removePop .row.rowCustom>div a:hover {
    background-color: #ff8a8a
}

.promptDialog.narrow.removePop .row.rowCustom>div .selected a,
.vmModal.narrow.removePop .row.rowCustom>div .selected a {
    background-color: #ff8a8a
}

.promptDialog.narrow.removePop .create,
.vmModal.narrow.removePop .create {
    background-color: #e05c69
}

.promptDialog.narrow.removePop .create:hover,
.vmModal.narrow.removePop .create:hover {
    background-color: #d6505c
}

.promptDialog.narrow.removePop .create:active,
.vmModal.narrow.removePop .create:active {
    background-color: #cd4855
}

.promptDialog.narrow.deleteNarrow .rowCheckbox,
.vmModal.narrow.deleteNarrow .rowCheckbox {
    margin-left: 0
}

.promptDialog.narrow.deleteNarrow .resourceList,
.vmModal.narrow.deleteNarrow .resourceList {
    background-color: #f2f6f9;
    padding: 12px 0;
    max-height: 200px;
    overflow: auto
}

.promptDialog.narrow.deleteNarrow .resourceList>li,
.vmModal.narrow.deleteNarrow .resourceList>li {
    overflow: hidden
}

.promptDialog.narrow.deleteNarrow .resourceList>li label,
.vmModal.narrow.deleteNarrow .resourceList>li label {
    width: 100px;
    float: left;
    display: block;
    text-align: right;
    padding-right: 10px;
    line-height: 22px
}

.promptDialog.narrow.deleteNarrow .resourceList>li ul,
.vmModal.narrow.deleteNarrow .resourceList>li ul {
    float: left
}

.promptDialog.narrow.deleteNarrow .resourceList>li ul li,
.vmModal.narrow.deleteNarrow .resourceList>li ul li {
    line-height: 22px
}

.promptDialog.narrow.deleteNarrow .resourceList>li ul li .loading,
.vmModal.narrow.deleteNarrow .resourceList>li ul li .loading {
    display: inline-block;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    background: url("/static/modules/apps/instance/i/icon-loading2.png") 0 0 no-repeat;
    position: relative;
    top: -2px;
    vertical-align: middle;
    border: none;
    margin-left: 20px
}

.promptDialog.narrow.deleteNarrow .resourceList>li ul li .loading:before,
.vmModal.narrow.deleteNarrow .resourceList>li ul li .loading:before {
    content: "";
    background: url("/static/modules/apps/instance/i/icon-loading.png") 0 0 no-repeat;
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    position: absolute;
    animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite
}

.promptDialog.narrow.deleteNarrow .resourceList>li ul li .done,
.vmModal.narrow.deleteNarrow .resourceList>li ul li .done {
    background: url("/static/modules/apps/instance/i/icon-update-status-done.png") center center no-repeat;
    display: inline-block;
    width: 17px;
    height: 17px;
    background-size: 14px 14px;
    margin-left: 20px;
    position: relative;
    top: 3px
}

.promptDialog .attached_instance,
.vmModal .attached_instance {
    background-color: #fff;
    height: 271px;
    overflow: auto;
    border: 1px solid silver;
    margin-bottom: 10px
}

.promptDialog .attached_instance table,
.vmModal .attached_instance table {
    width: 100%
}

.promptDialog .attached_instance table th,
.vmModal .attached_instance table th {
    background-color: #dcdcdc;
    color: #6e6e6e;
    font-weight: normal;
    border-right: 1px solid silver;
    font-size: 13px;
    line-height: 24px
}

.promptDialog .attached_instance table th:last-child,
.vmModal .attached_instance table th:last-child {
    border-right: none
}

.promptDialog .horizontal,
.vmModal .horizontal {
    padding-bottom: 28px;
    height: auto;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.promptDialog .horizontal .leftColumn,
.vmModal .horizontal .leftColumn {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-right: 25px;
    padding-left: 25px
}

.promptDialog .horizontal .leftColumn>label,
.vmModal .horizontal .leftColumn>label {
    position: relative;
    margin-left: 10px;
    top: 5px
}

.promptDialog .horizontal .rightColumn,
.vmModal .horizontal .rightColumn {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-left: 1px solid #d9d9d9;
    padding-right: 25px;
    padding-left: 25px
}

.promptDialog .horizontal .rightColumn p,
.vmModal .horizontal .rightColumn p {
    font-size: 12px;
    color: #333;
    line-height: 15px;
    margin-bottom: 0
}

.promptDialog .horizontal .rightColumn h3,
.vmModal .horizontal .rightColumn h3 {
    font-size: 12px;
    color: #010101;
    line-height: 16px;
    font-weight: normal;
    margin: 5px 0
}

.promptDialog .horizontal .rightColumn .flavor_details,
.vmModal .horizontal .rightColumn .flavor_details {
    color: #787878;
    border: 1px solid #f0f0f0;
    line-height: 24px
}

.promptDialog .horizontal .rightColumn .flavor_details .row,
.vmModal .horizontal .rightColumn .flavor_details .row {
    margin-bottom: 0;
    padding: 0 15px;
    color: #787878
}

.promptDialog .horizontal .rightColumn .flavor_details .row label,
.vmModal .horizontal .rightColumn .flavor_details .row label {
    width: 170px;
    margin-bottom: 0
}

.promptDialog .horizontal .rightColumn .flavor_details .row:nth-child(2n),
.vmModal .horizontal .rightColumn .flavor_details .row:nth-child(2n) {
    background-color: #f0f0f0
}

.promptDialog .horizontal .rightColumn .quotas .row,
.vmModal .horizontal .rightColumn .quotas .row {
    margin-bottom: 0;
    line-height: 18px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.promptDialog .horizontal .rightColumn .quotas .row label,
.vmModal .horizontal .rightColumn .quotas .row label {
    width: auto;
    color: #787878
}

.promptDialog .horizontal .rightColumn .quotas .row label strong,
.vmModal .horizontal .rightColumn .quotas .row label strong {
    font-weight: normal
}

.promptDialog .horizontal .rightColumn .quotas .row span,
.vmModal .horizontal .rightColumn .quotas .row span {
    color: #787878;
    text-align: right;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.promptDialog .horizontal .rightColumn .quotas .progress,
.vmModal .horizontal .rightColumn .quotas .progress {
    margin-bottom: 5px;
    background-color: #f0f0f0;
    box-shadow: none;
    border-radius: 0;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.promptDialog .horizontal .rightColumn .quotas .progress .used,
.vmModal .horizontal .rightColumn .quotas .progress .used {
    background-color: #00afc8;
    height: 100%
}

.promptDialog .horizontal .rightColumn .quotas .progress .tobeused,
.vmModal .horizontal .rightColumn .quotas .progress .tobeused {
    background-color: #42cee4;
    height: 100%
}

.promptDialog .horizontal.keypair_panel,
.vmModal .horizontal.keypair_panel {
    height: 375px
}

.promptDialog .horizontal .row select,
.vmModal .horizontal .row select {
    width: 220px
}

.promptDialog .horizontal .row.addRow select,
.vmModal .horizontal .row.addRow select {
    width: 171px
}

.promptDialog .horizontal .row.addRow a.add,
.vmModal .horizontal .row.addRow a.add {
    display: inline-block;
    font-size: 13px;
    color: #fff;
    background-color: #00afc8;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    position: relative;
    top: -3px
}

.promptDialog .horizontal .row.addRow a.add:hover,
.vmModal .horizontal .row.addRow a.add:hover {
    text-decoration: none
}

.promptDialog .horizontal .row.rowCustom>label,
.vmModal .horizontal .row.rowCustom>label {
    display: block;
    float: left
}

.promptDialog .horizontal .row.rowCustom .custom,
.vmModal .horizontal .row.rowCustom .custom {
    float: left
}

.promptDialog .buttonBar,
.vmModal .buttonBar {
    text-align: right;
    margin-top: 0px;
    background-color: #ffffff
}

.promptDialog .buttonBar a,
.vmModal .buttonBar a {
    display: inline-block;
    margin: 9px 10px 0 0;
    padding: 0 12px;
    min-width: 50px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background-color: #1eb9a5
}

.promptDialog .buttonBar a:last-child,
.vmModal .buttonBar a:last-child {
    margin-right: 48px
}

.promptDialog .buttonBar a.create,
.vmModal .buttonBar a.create {
    margin-right: 48px
}

.promptDialog .buttonBar a:hover,
.vmModal .buttonBar a:hover {
    background-color: #09b29c
}

.promptDialog .buttonBar a:active,
.vmModal .buttonBar a:active {
    background-color: #00a993
}

.promptDialog .buttonBar a.disabled,
.vmModal .buttonBar a.disabled {
    color: #a8b3be;
    background-color: #d9e3e5!important;
    cursor: not-allowed
}

.promptDialog .buttonBar a.disabled:hover,
.vmModal .buttonBar a.disabled:hover {
    background-color: #d9e3e5
}

.promptDialog .buttonBar a.delete,
.vmModal .buttonBar a.delete {
    background-color: #e05c69
}

.promptDialog .buttonBar a.delete:hover,
.vmModal .buttonBar a.delete:hover {
    background-color: #d6505c
}

.promptDialog .buttonBar a.delete:active,
.vmModal .buttonBar a.delete:active {
    background-color: #cd4855
}

.promptDialog.flavor_modal,
.vmModal.flavor_modal {
    width: auto;
    height: 210px
}

.promptDialog.flavor_modal .horizontal,
.vmModal.flavor_modal .horizontal {
    padding-right: 16px
}

.promptDialog.instance_attach_volume select,
.vmModal.instance_attach_volume select {
    width: auto
}

.promptDialog.instance_new_volume label,
.vmModal.instance_new_volume label {
    width: 91px
}

.promptDialog.instance_new_volume .horizontal .rightColumn,
.vmModal.instance_new_volume .horizontal .rightColumn {
    height: 375px
}

.promptDialog.instance_new_volume .horizontal .rightColumn h3,
.vmModal.instance_new_volume .horizontal .rightColumn h3 {
    margin: 20px 0 10px 0
}

.promptDialog.instance_new_volume .horizontal .rightColumn p,
.vmModal.instance_new_volume .horizontal .rightColumn p {
    margin-bottom: 10px
}

.promptDialog.instance_update_security_group,
.vmModal.instance_update_security_group,
.promptDialog.instance_new_security_group,
.vmModal.instance_new_security_group {
    height: auto
}

.promptDialog.instance_update_security_group .horizontal,
.vmModal.instance_update_security_group .horizontal,
.promptDialog.instance_new_security_group .horizontal,
.vmModal.instance_new_security_group .horizontal {
    padding: 20px 0
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .templatesContent,
.vmModal.instance_update_security_group .horizontal .leftColumn .templatesContent,
.promptDialog.instance_new_security_group .horizontal .leftColumn .templatesContent,
.vmModal.instance_new_security_group .horizontal .leftColumn .templatesContent {
    overflow: hidden;
    clear: both
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .templatesContent ul li,
.vmModal.instance_update_security_group .horizontal .leftColumn .templatesContent ul li,
.promptDialog.instance_new_security_group .horizontal .leftColumn .templatesContent ul li,
.vmModal.instance_new_security_group .horizontal .leftColumn .templatesContent ul li {
    float: left
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection {
    margin-top: 8px;
    border: 1px solid #e7e7e7
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection .subHeader,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection .subHeader,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection .subHeader,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection .subHeader {
    font-size: 12px;
    color: #333;
    background-color: #c8c8c8;
    line-height: 24px;
    padding-left: 8px
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection .subContent,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection .subContent,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection .subContent,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection .subContent {
    background-color: #fafafa;
    padding-left: 8px
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection .subContent ul,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection .subContent ul,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection .subContent ul,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection .subContent ul {
    padding: 0;
    margin: 0 0 8px 0;
    clear: both;
    overflow: hidden
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection .subContent ul li,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection .subContent ul li,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection .subContent ul li,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection .subContent ul li {
    display: block;
    float: left;
    width: 70px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    font-size: 12px;
    margin-right: 8px;
    margin-top: 8px;
    border: 1px solid #e7e7e7
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection .subContent ul li a,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection .subContent ul li a,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection .subContent ul li a,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection .subContent ul li a {
    color: #787878;
    display: block
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection .subContent ul li a:hover,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection .subContent ul li a:hover,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection .subContent ul li a:hover,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection .subContent ul li a:hover {
    text-decoration: none
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection .subContent ul li.selected,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection .subContent ul li.selected,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection .subContent ul li.selected,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection .subContent ul li.selected {
    background-color: #00afc8;
    border-color: #00afc8
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection .subContent ul li.selected a,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection .subContent ul li.selected a,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection .subContent ul li.selected a,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection .subContent ul li.selected a {
    color: #fff
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection .subContent .row:first-child,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection .subContent .row:first-child,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection .subContent .row:first-child,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection .subContent .row:first-child {
    margin-top: 8px
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .selection .row,
.vmModal.instance_update_security_group .horizontal .leftColumn .selection .row,
.promptDialog.instance_new_security_group .horizontal .leftColumn .selection .row,
.vmModal.instance_new_security_group .horizontal .leftColumn .selection .row {
    margin-right: 8px
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .row,
.vmModal.instance_update_security_group .horizontal .leftColumn .row,
.promptDialog.instance_new_security_group .horizontal .leftColumn .row,
.vmModal.instance_new_security_group .horizontal .leftColumn .row {
    margin-top: 5px;
    margin-bottom: 0;
    margin-right: 0;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    overflow: hidden;
    position: relative;
    min-height: 23px
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .row select,
.vmModal.instance_update_security_group .horizontal .leftColumn .row select,
.promptDialog.instance_new_security_group .horizontal .leftColumn .row select,
.vmModal.instance_new_security_group .horizontal .leftColumn .row select,
.promptDialog.instance_update_security_group .horizontal .leftColumn .row input,
.vmModal.instance_update_security_group .horizontal .leftColumn .row input,
.promptDialog.instance_new_security_group .horizontal .leftColumn .row input,
.vmModal.instance_new_security_group .horizontal .leftColumn .row input,
.promptDialog.instance_update_security_group .horizontal .leftColumn .row label,
.vmModal.instance_update_security_group .horizontal .leftColumn .row label,
.promptDialog.instance_new_security_group .horizontal .leftColumn .row label,
.vmModal.instance_new_security_group .horizontal .leftColumn .row label {
    margin-bottom: 0;
    display: block
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .row label,
.vmModal.instance_update_security_group .horizontal .leftColumn .row label,
.promptDialog.instance_new_security_group .horizontal .leftColumn .row label,
.vmModal.instance_new_security_group .horizontal .leftColumn .row label {
    width: 110px
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .row input,
.vmModal.instance_update_security_group .horizontal .leftColumn .row input,
.promptDialog.instance_new_security_group .horizontal .leftColumn .row input,
.vmModal.instance_new_security_group .horizontal .leftColumn .row input,
.promptDialog.instance_update_security_group .horizontal .leftColumn .row select,
.vmModal.instance_update_security_group .horizontal .leftColumn .row select,
.promptDialog.instance_new_security_group .horizontal .leftColumn .row select,
.vmModal.instance_new_security_group .horizontal .leftColumn .row select {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .row input.error,
.vmModal.instance_update_security_group .horizontal .leftColumn .row input.error,
.promptDialog.instance_new_security_group .horizontal .leftColumn .row input.error,
.vmModal.instance_new_security_group .horizontal .leftColumn .row input.error,
.promptDialog.instance_update_security_group .horizontal .leftColumn .row select.error,
.vmModal.instance_update_security_group .horizontal .leftColumn .row select.error,
.promptDialog.instance_new_security_group .horizontal .leftColumn .row select.error,
.vmModal.instance_new_security_group .horizontal .leftColumn .row select.error {
    border-color: #e05c69
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .row:last-child,
.vmModal.instance_update_security_group .horizontal .leftColumn .row:last-child,
.promptDialog.instance_new_security_group .horizontal .leftColumn .row:last-child,
.vmModal.instance_new_security_group .horizontal .leftColumn .row:last-child {
    margin-bottom: 5px
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .add_rule,
.vmModal.instance_update_security_group .horizontal .leftColumn .add_rule,
.promptDialog.instance_new_security_group .horizontal .leftColumn .add_rule,
.vmModal.instance_new_security_group .horizontal .leftColumn .add_rule {
    background-color: #96d200;
    font-size: 12px;
    line-height: 23px;
    padding: 0 10px;
    color: #fff;
    display: block;
    margin-bottom: 8px;
    position: absolute;
    right: 0;
    top: 0
}

.promptDialog.instance_update_security_group .horizontal .leftColumn .add_rule:hover,
.vmModal.instance_update_security_group .horizontal .leftColumn .add_rule:hover,
.promptDialog.instance_new_security_group .horizontal .leftColumn .add_rule:hover,
.vmModal.instance_new_security_group .horizontal .leftColumn .add_rule:hover {
    text-decoration: none
}

.promptDialog.instance_update_security_group .horizontal .rightColumn ul li table,
.vmModal.instance_update_security_group .horizontal .rightColumn ul li table,
.promptDialog.instance_new_security_group .horizontal .rightColumn ul li table,
.vmModal.instance_new_security_group .horizontal .rightColumn ul li table {
    width: 100%
}

.promptDialog.instance_update_security_group .horizontal .rightColumn ul li table th,
.vmModal.instance_update_security_group .horizontal .rightColumn ul li table th,
.promptDialog.instance_new_security_group .horizontal .rightColumn ul li table th,
.vmModal.instance_new_security_group .horizontal .rightColumn ul li table th {
    padding: 0 5px;
    background-color: #c8c8c8;
    color: #333;
    font-weight: normal;
    height: 25px
}

.promptDialog.instance_update_security_group .horizontal .rightColumn ul li table td,
.vmModal.instance_update_security_group .horizontal .rightColumn ul li table td,
.promptDialog.instance_new_security_group .horizontal .rightColumn ul li table td,
.vmModal.instance_new_security_group .horizontal .rightColumn ul li table td {
    padding: 0 5px;
    color: #333;
    font-weight: normal;
    height: 25px
}

.promptDialog.instance_update_security_group .horizontal .rightColumn ul li table td a,
.vmModal.instance_update_security_group .horizontal .rightColumn ul li table td a,
.promptDialog.instance_new_security_group .horizontal .rightColumn ul li table td a,
.vmModal.instance_new_security_group .horizontal .rightColumn ul li table td a {
    background: url("/static/modules/apps/instance/i/remove-rule.png") 0 bottom no-repeat;
    display: block;
    width: 14px;
    height: 14px
}

.promptDialog.instance_update_security_group .horizontal .rightColumn ul li table td a:hover,
.vmModal.instance_update_security_group .horizontal .rightColumn ul li table td a:hover,
.promptDialog.instance_new_security_group .horizontal .rightColumn ul li table td a:hover,
.vmModal.instance_new_security_group .horizontal .rightColumn ul li table td a:hover {
    background-position: 0 0
}

.promptDialog.instance_edit,
.vmModal.instance_edit {
    height: auto
}

.promptDialog.instance_set_security_group,
.vmModal.instance_set_security_group {
    height: auto
}

.promptDialog.instance_set_security_group ul,
.vmModal.instance_set_security_group ul {
    padding: 20px
}

.promptDialog.create_image_pop,
.vmModal.create_image_pop {
    width: 814px
}

.promptDialog.create_image_pop .panel .leftFields,
.vmModal.create_image_pop .panel .leftFields {
    width: 60%;
    border-right: 1px solid #ccc;
    padding-right: 35px;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.promptDialog.create_image_pop .panel .leftFields .fileRow .file,
.vmModal.create_image_pop .panel .leftFields .fileRow .file {
    line-height: 19px
}

.promptDialog.create_image_pop .panel .rightFields,
.vmModal.create_image_pop .panel .rightFields {
    width: 40%;
    padding-left: 25px
}

.promptDialog.create_image_pop .panel .row:not(.checkRow),
.vmModal.create_image_pop .panel .row:not(.checkRow) {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.promptDialog.create_image_pop .panel .row:not(.checkRow) label,
.vmModal.create_image_pop .panel .row:not(.checkRow) label {
    display: inline-block;
    width: 80px;
    padding-top: 5px
}

.promptDialog.create_image_pop .panel .row:not(.checkRow) input,
.vmModal.create_image_pop .panel .row:not(.checkRow) input {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.promptDialog.create_image_pop .panel .row:not(.checkRow) textarea,
.vmModal.create_image_pop .panel .row:not(.checkRow) textarea {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100px
}

.promptDialog.create_image_pop .panel .checkRow,
.vmModal.create_image_pop .panel .checkRow {
    padding-left: 131px
}

.promptDialog.create_image_pop .panel .checkRow label,
.vmModal.create_image_pop .panel .checkRow label {
    position: relative;
    top: 5px
}

.promptDialog.create_image_pop .panel .tips,
.vmModal.create_image_pop .panel .tips {
    position: relative;
    top: -15px;
    padding-left: 131px
}

.promptDialog [class^="icon-"],
.vmModal [class^="icon-"] {
    display: inline-block;
    background: url(/static/public/css/utils/images/menu_icon_v8.png) 0 0 no-repeat;
    background-size: 941px 40px;
    height: 17px;
    width: 17px;
    margin-right: 3px;
    vertical-align: middle
}

.promptDialog [class^="icon-"].vpn,
.vmModal [class^="icon-"].vpn {
    background-position: 1px 0
}

.promptDialog [class^="icon-"].security,
.vmModal [class^="icon-"].security {
    background-position: -25px 0
}

.promptDialog [class^="icon-"].volume,
.vmModal [class^="icon-"].volume {
    background-position: -51px 2px
}

.promptDialog [class^="icon-"].lb,
.vmModal [class^="icon-"].lb {
    background-position: -76px 0
}

.promptDialog [class^="icon-"].overview,
.vmModal [class^="icon-"].overview {
    background-position: -103px 0
}

.promptDialog [class^="icon-"].ip,
.vmModal [class^="icon-"].ip {
    background-position: -128px 0
}

.promptDialog [class^="icon-"].network,
.vmModal [class^="icon-"].network {
    background-position: -153px 3px
}

.promptDialog [class^="icon-"].subnet,
.vmModal [class^="icon-"].subnet {
    background-position: -436px 2px
}

.promptDialog [class^="icon-"].image,
.vmModal [class^="icon-"].image,
.promptDialog [class^="icon-"].snap-image,
.vmModal [class^="icon-"].snap-image {
    background-position: -179px 0
}

.promptDialog [class^="icon-"].snapshot,
.vmModal [class^="icon-"].snapshot {
    background-position: -205px 1px
}

.promptDialog [class^="icon-"].router,
.vmModal [class^="icon-"].router {
    background-position: -231px 0
}

.promptDialog [class^="icon-"].key-pair,
.vmModal [class^="icon-"].key-pair {
    background-position: -256px 1px
}

.promptDialog [class^="icon-"].interface,
.vmModal [class^="icon-"].interface {
    background-position: -283px 2px
}

.promptDialog [class^="icon-"].topology,
.vmModal [class^="icon-"].topology {
    background-position: -309px 0
}

.promptDialog [class^="icon-"].instance,
.vmModal [class^="icon-"].instance {
    background-position: -334px 1px
}

.promptDialog [class^="icon-"].record,
.vmModal [class^="icon-"].record {
    background-position: -361px 3px
}

.promptDialog [class^="icon-"].ticket,
.vmModal [class^="icon-"].ticket {
    background-position: -387px 0
}

.promptDialog [class^="icon-"].operation,
.vmModal [class^="icon-"].operation {
    background-position: -412px 0
}

.promptDialog [class^="icon-"].monitor,
.vmModal [class^="icon-"].monitor {
    background-position: -463px 2px
}

.promptDialog [class^="icon-"].alarm,
.vmModal [class^="icon-"].alarm {
    background-position: -463px 2px
}

.promptDialog [class^="icon-"].notification,
.vmModal [class^="icon-"].notification {
    background-position: -489px 2px
}

.promptDialog [class^="icon-"].account,
.vmModal [class^="icon-"].account {
    background-position: -540px 0
}

.promptDialog [class^="icon-"].project,
.vmModal [class^="icon-"].project {
    background-position: -515px 0
}

.promptDialog [class^="icon-"].role,
.vmModal [class^="icon-"].role {
    background-position: -567px 0
}

.promptDialog [class^="icon-"].record_overview,
.vmModal [class^="icon-"].record_overview {
    background-position: -592px 3px
}

.promptDialog [class^="icon-"].account_charge,
.vmModal [class^="icon-"].account_charge {
    background-position: -619px 0
}

.promptDialog [class^="icon-"].collaboration,
.vmModal [class^="icon-"].collaboration {
    background-position: -645px 0
}

.promptDialog [class^="icon-"].account_record,
.vmModal [class^="icon-"].account_record {
    background-position: -671px 0
}

.promptDialog [class^="icon-"].listener,
.vmModal [class^="icon-"].listener {
    background-position: -695px 0
}

.promptDialog [class^="icon-"].file-sharing,
.vmModal [class^="icon-"].file-sharing {
    background-position: -718px 1px
}

.promptDialog [class^="icon-"].share,
.vmModal [class^="icon-"].share {
    background-position: -718px 1px
}

.promptDialog [class^="icon-"].pool,
.vmModal [class^="icon-"].pool {
    background-position: -745px 2px
}

.promptDialog [class^="icon-"].network-sharing,
.vmModal [class^="icon-"].network-sharing {
    background-position: -771px 0
}

.promptDialog [class^="icon-"].invoice,
.vmModal [class^="icon-"].invoice {
    background-position: -823px 0
}

.promptDialog [class^="icon-"].app-center,
.vmModal [class^="icon-"].app-center {
    background-position: -925px 0
}

.promptDialog .icon-security,
.vmModal .icon-security {
    background-position: -26px 0
}

.promptDialog .icon-ip,
.vmModal .icon-ip {
    background-position: -129px 0
}

.promptDialog .icon-interface,
.vmModal .icon-interface {
    background-position: -283px 0
}

.promptDialog .icon-instance,
.vmModal .icon-instance {
    background-position: -335px 0
}

.promptDialog .icon-volume,
.vmModal .icon-volume {
    background-position: -51px 2px
}

.promptDialog .icon-keypair,
.vmModal .icon-keypair {
    background-position: -259px 0
}

.promptDialog .icon-router,
.vmModal .icon-router {
    background-position: -231px 0
}

.promptDialog .icon-network,
.vmModal .icon-network {
    background-position: -153px 3px
}

.promptDialog .icon-subnet,
.vmModal .icon-subnet {
    background-position: -437px 0
}

.promptDialog .icon-snapshot,
.vmModal .icon-snapshot {
    background-position: -205px 1px
}

.promptDialog .icon-alarm,
.vmModal .icon-alarm {
    background-position: -463px 2px
}

.promptDialog .icon-notification,
.vmModal .icon-notification {
    background-position: -489px 2px
}

.promptDialog .icon-account,
.vmModal .icon-account {
    background-position: -540px 0
}

.promptDialog .icon-project,
.vmModal .icon-project {
    background-position: -515px 0
}

.promptDialog .icon-role,
.vmModal .icon-role {
    background-position: -567px 0
}

.promptDialog .icon-collaboration,
.vmModal .icon-collaboration {
    background-position: -645px 0
}

.promptDialog .icon-lb,
.vmModal .icon-lb {
    background-position: -76px 0
}

.promptDialog .icon-listener,
.vmModal .icon-listener {
    background-position: -695px 0
}

.promptDialog .icon-file-sharing,
.vmModal .icon-file-sharing {
    background-position: -718px 1px
}

.promptDialog .icon-pool,
.vmModal .icon-pool,
.promptDialog .icon-resource_pool,
.vmModal .icon-resource_pool {
    background-position: -745px 2px
}

.promptDialog .icon-network-sharing,
.vmModal .icon-network-sharing {
    background-position: -771px 0
}

.promptDialog .icon-policy,
.vmModal .icon-policy {
    background-position: -800px 4px
}

.promptDialog .icon-invoice,
.vmModal .icon-invoice {
    background-position: -823px 0
}

.promptDialog iframe,
.vmModal iframe {
    display: none
}

html.hideVnc .btn[data-action="vnc"],
html.hideVnc .tab[field="vnc"],
html.hideVnc a[field="vnc_console"] {
    display: none!important
}

html[lang="en"] .vmModal.narrow .panel .row>label,
html[lang="en-us"] .vmModal.narrow .panel .row>label {
    line-height: 16px;
    padding-top: 8px;
    white-space: nowrap;
    right: 390px;
    left: auto;
    width: auto
}

html[lang="en"] .vmModal.narrow .panel .row span.name,
html[lang="en-us"] .vmModal.narrow .panel .row span.name {
    display: inline-block;
    padding-top: 8px
}

html[lang="en"] .vmModal.narrow .panel .row.rowCheckbox>label,
html[lang="en-us"] .vmModal.narrow .panel .row.rowCheckbox>label {
    right: 0
}

html[lang="en"] .vmModal.narrow .panel .row.textRow span,
html[lang="en-us"] .vmModal.narrow .panel .row.textRow span {
    display: inline-block;
    padding-top: 8px;
    line-height: 16px
}

@keyframes spin {
    from {
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    50% {
        -ms-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    to {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg)
    }
    50% {
        -webkit-transform: rotate(180deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg)
    }
    50% {
        -moz-transform: rotate(180deg)
    }
    to {
        -moz-transform: rotate(360deg)
    }
}

#aaf4 .userApp .vmPage .consumption {
    color: #f78913;
    font-weight: bold;
    font-size: 12px
}

#aaf4 .userApp .vmPage .balance {
    color: #1eb9a5;
    font-weight: bold;
    font-size: 12px
}

#aaf4 .userApp .vmPage .toggler {
    background-color: #ecf0f2;
    color: #738293;
    font-size: 13px;
    padding: 0 16px;
    height: 34px;
    line-height: 34px;
    border-radius: 2px;
    display: block;
    margin-right: 0
}

#aaf4 .userApp .vmPage .toggler.selected {
    background-color: #5cd0e0;
    color: #252f3d
}

#aaf4 .userApp .vmPage .toggler:hover {
    background-color: #b9f1f9
}

#aaf4 .userApp .vmPage .toggler:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

#aaf4 .userApp .vmPage .toggler:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.instanceApp .vmPage .attachment-info .attach-wp {
    width: 140px;
    height: 100px;
    background-color: #ecf0f2;
    text-align: center;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px
}

.instanceApp .vmPage .attachment-info .attach-wp img {
    display: block;
    width: 132px;
    height: 64px;
    margin-top: 4px;
    margin-left: 4px
}

.instanceApp .vmPage .attachment-info .attach-wp .desc {
    font-size: 12px;
    margin-top: 10px;
    padding: 0 10px;
    overflow-x: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

.instanceApp .vmPage .attachment-info .no-attach {
    color: #738293
}

.vmModal.invoice .panel {
    padding-left: 38px;
    padding-right: 38px
}

.vmModal.invoice .title {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 6px 10px;
    height: 18px;
    overflow: hidden
}

.vmModal.invoice .title .sub-title {
    font-size: 12px;
    font-weight: normal;
    margin-left: 20px;
    color: #a8b3be
}

.vmModal.invoice .title .sub-title .num {
    color: #f78913
}

.vmModal.invoice .title .sub-title .price {
    color: #1eb9a5
}

.vmModal.invoice .inovice-num {
    margin-left: 10px;
    margin-top: 18px;
    margin-bottom: 28px
}

.vmModal.invoice .inovice-num input.error {
    border: 1px solid #e05c69
}

.vmModal.invoice .inovice-num span:first-child {
    margin-right: 10px
}

.vmModal.invoice .inovice-num span:last-child {
    margin-left: 6px
}

.vmModal.invoice ul {
    margin-bottom: 10px
}

.vmModal.invoice ul li {
    height: 36px;
    line-height: 36px
}

.vmModal.invoice ul li.row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    margin: 0!important
}

.vmModal.invoice ul li.row input {
    margin-left: 10px;
    margin-top: 0
}

.vmModal.invoice ul li.row>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap
}

.vmModal.invoice ul li.row>div:first-child {
    width: 30px;
    min-width: 30px;
    max-width: 30px
}

.vmModal.invoice ul li.row>div:nth-child(2) {
    width: 240px;
    min-width: 240px;
    max-width: 240px
}

.vmModal.invoice ul li.row>div.edit-col a {
    float: right;
    margin-right: 12px
}

.vmModal.invoice ul li.row>div.name {
    padding-left: 10px;
    width: 50px;
    min-width: 50px;
    max-width: 50px
}

.vmModal.invoice ul li.row>div.addr {
    width: 210px;
    min-width: 210px;
    max-width: 210px
}

.vmModal.invoice ul li.row>div.type {
    padding-left: 15px
}

.vmModal.invoice ul li.row:hover {
    background-color: #ecf0f2
}

.vmModal.invoice ul li.row .del {
    position: relative;
    top: 10px;
    width: 18px;
    height: 16px;
    background: url("/static/modules/apps/instance/i/icon-add-remove.png") 0 0 no-repeat;
    background-size: 184px 16px;
    cursor: pointer
}

.vmModal.invoice ul li.row .del:hover {
    background-position: -48px 0
}

.vmModal.invoice ul li .more {
    margin-left: 10px
}

.vmModal.invoice-info {
    width: 814px
}

.vmModal.invoice-info .panel {
    height: 420px
}

.vmModal.invoice-info .panel input[type="text"] {
    width: 60% !important
}

.vmModal.invoice-info .panel .row {
    margin-left: 90px
}

.vmModal.invoice-info .panel .row>label {
    width: 115px!important;
    left: -125px !important
}

.vmModal.invoice-info .panel .file-wp {
    position: absolute;
    right: 40px;
    top: 10px
}

.vmModal.invoice-info .panel .file-wp .file-title strong {
    color: #f00
}

.vmModal.invoice-info .panel .file-wp .attach-wp {
    overflow: hidden;
    width: 140px;
    height: 100px;
    background-color: #ecf0f2;
    text-align: center;
    margin-top: 15px
}

.vmModal.invoice-info .panel .file-wp .img-wp {
    width: 132px;
    height: 64px;
    margin-top: 4px;
    margin-left: 4px;
    background: url("/static/modules/apps/bills/img/icon_upload@2x.png") center center no-repeat;
    background-size: 30px 30px;
    cursor: pointer
}

.vmModal.invoice-info .panel .file-wp img {
    display: block;
    width: 132px;
    height: 64px
}

.vmModal.invoice-info .panel .file-wp .desc {
    font-size: 12px;
    margin-top: 10px;
    padding: 0 10px;
    overflow-x: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

.vmModal.invoice-info .panel .file-wp .loading {
    display: inline-block;
    margin-top: 13px;
    padding: 10px;
    background-color: #ecf0f2;
    width: 40px;
    height: 20px
}

.vmModal.invoice-info .panel .file-wp .error {
    border: 1px solid #e05c69
}

#J_billSetting {
    height: 100%
}

#J_billSetting .bill-menu {
    margin: 0 20px
}

.billApp label,
.billApp input {
    display: inline-block;
    margin: 0px;
    vertical-align: middle;
    font-size: 12px
}

.billApp .bill-menu {
    margin-top: -10px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    border-bottom: 3px solid #ecf0f2;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.billApp .bill-menu a {
    display: inline-block;
    padding: 6px 12px 4px;
    margin-left: 8px;
    font-size: 14px;
    color: #738293;
    line-height: 35px;
    height: 35px
}

.billApp .bill-menu a:first-child {
    margin-left: 0
}

.billApp .bill-menu a:hover {
    border-bottom: 3px solid #abe9f2
}

.billApp .bill-menu a.selected {
    color: #252f3d;
    border-bottom: 3px solid #00afc8;
    cursor: default
}

.billApp .setting-con,
.billApp .overview-con,
.billApp .record-con,
.billApp .charge-con,
.billApp .receipt-con,
.billApp .account-record-con,
.billApp .project-con {
    position: absolute;
    top: 48px;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: auto
}

.billApp .table-header {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    margin: 20px 20px 0 20px;
    overflow: hidden
}

.billApp .table-header>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 36px;
    line-height: 36px;
    padding-left: 16px;
    background-color: #ecf0f2;
    color: #626f7e;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    border-right: 1px solid #fff;
    font-size: 12px;
    white-space: nowrap
}

.billApp .table-header>div:last-child {
    border-right: none
}

.billApp .table-header .status .selectWp {
    position: relative;
    display: inline-block;
    line-height: 28px
}

.billApp .table-header .status .selectWp:hover .selectLabel {
    background-position: 0 -21px
}

.billApp .table-header .status .selectLabel {
    position: relative;
    top: 2px;
    margin-left: 8px;
    display: inline-block;
    width: 19px;
    height: 13px;
    background: url(/static/public/img/table_arrow.png) 0 0 no-repeat
}

.billApp .table-header .status select {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    opacity: 0
}

.billApp .table {
    margin: 0 20px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.billApp .table .table-content {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-height: 410px;
    overflow-y: auto;
    overflow-x: hidden
}

.billApp .table .table-content i {
    margin-right: 5px !important;
    margin-top: -2px
}

.billApp .table .row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    border-bottom: 1px solid #e7ebed;
    white-space: nowrap;
    font-size: 12px
}

.billApp .table .row:hover {
    background-color: #e1f4f7
}

.billApp .table .row.selected {
    background-color: #b9f1f9
}

.billApp .table .row .status {
    text-transform: capitalize
}

.billApp .table .row a.disabled {
    color: #738293;
    cursor: not-allowed
}

.billApp .table .row a.disabled:hover {
    color: #738293
}

.billApp .table .row a.disabled:active {
    color: #738293
}

.billApp .table .row>div {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    font-size: 12px;
    color: #252f3d;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.billApp .table .row>div:last-child {
    border-right: none
}

.billApp .table .row .num {
    font-weight: bold;
    color: #f78913
}

.billApp .table .row .price {
    font-weight: bold;
    color: #1eb9a5
}

.billApp .pages,
.billApp .summary {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    margin: 15px 0 40px;
    height: 27px;
    min-height: 27px;
    max-height: 27px;
    line-height: 27px;
    font-size: 12px;
    color: #626f7e
}

.billApp .pages .page,
.billApp .summary .page {
    float: right;
    font-size: 12px
}

.billApp .pages .page span,
.billApp .summary .page span {
    padding-right: 10px
}

.billApp .pages .page a,
.billApp .summary .page a {
    display: inline-block;
    text-align: center;
    height: 24px;
    width: 20px;
    color: #626f7e
}

.billApp .pages .page a:hover,
.billApp .summary .page a:hover {
    color: #00afc8
}

.billApp .pages .page a.selected,
.billApp .summary .page a.selected {
    color: #00afc8;
    cursor: default
}

.billApp .pages .page .prev,
.billApp .summary .page .prev,
.billApp .pages .page .next,
.billApp .summary .page .next {
    height: 24px;
    width: 24px;
    background: #00afc8 url(/static/modules/apps/bills/img/arrows@2x.png) 8px -33px no-repeat;
    background-size: 6px 70px;
    border-radius: 2px;
    color: #fff;
    text-align: center
}

.billApp .pages .page .prev:hover,
.billApp .summary .page .prev:hover,
.billApp .pages .page .next:hover,
.billApp .summary .page .next:hover {
    color: #fff;
    background-color: #00a5bd
}

.billApp .pages .page .prev:active,
.billApp .summary .page .prev:active,
.billApp .pages .page .next:active,
.billApp .summary .page .next:active {
    background-color: #009bb1
}

.billApp .pages .page .prev.disabled,
.billApp .summary .page .prev.disabled,
.billApp .pages .page .next.disabled,
.billApp .summary .page .next.disabled {
    background-color: #d9e3e5;
    color: #a8b3be;
    cursor: not-allowed
}

.billApp .pages .page .next,
.billApp .summary .page .next {
    background-position: 9px 5px
}

.billApp .pages .page .next.disabled,
.billApp .summary .page .next.disabled {
    background-position: 9px -14px;
    cursor: not-allowed
}

.billApp .utility {
    position: relative;
    margin-top: 20px;
    margin-left: 20px;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    overflow: hidden
}

.billApp .utility select {
    float: left;
    width: 120px;
    margin-right: 10px
}

.billApp .utility .date {
    float: left;
    padding: 0 0 0 7px;
    border: 1px solid #e2e7ea;
    border-radius: 2px
}

.billApp .utility .date label {
    padding-top: 2px
}

.billApp .utility .date input {
    line-height: 20px;
    height: 30px;
    width: 85px;
    padding: 4px;
    border: none;
    color: #252f3d;
    background-color: transparent;
    cursor: default
}

.billApp .utility .btn {
    float: left;
    margin-left: 10px;
    display: inline-block;
    background: #00afc8;
    font-size: 13px;
    color: #fff;
    background-color: #00afc8;
    border-radius: 2px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    min-width: 50px;
    padding: 0 20px
}

.billApp .utility .btn:hover {
    background-color: #00a5bd
}

.billApp .utility .btn:active {
    background-color: #009bb1
}

.billApp .setting-con {
    margin-top: 30px
}

.billApp .setting-con .avatar {
    float: left;
    width: 22%;
    text-align: center
}

.billApp .setting-con .avatar .img-wp {
    margin: 0 auto;
    width: 110px;
    height: 110px;
    background: url(/static/public/img/gravatar_110.png) center 0 no-repeat;
    border-radius: 50%
}

.billApp .setting-con .avatar .img {
    margin: 0 auto;
    width: 110px;
    height: 110px;
    border-radius: 50%
}

.billApp .setting-con .avatar a {
    display: block;
    font-size: 12px;
    margin-top: 16px
}

.billApp .setting-con .detail {
    float: left;
    width: 66%
}

.billApp .setting-con .detail ul li {
    margin-bottom: 10px
}

.billApp .setting-con .detail ul li .desc {
    position: relative;
    background-color: #ecf0f2;
    height: 40px;
    line-height: 40px;
    padding-left: 16px;
    cursor: pointer
}

.billApp .setting-con .detail ul li .desc i {
    position: absolute;
    right: 12px;
    top: 15px
}

.billApp .setting-con .detail ul li .con {
    margin-top: 23px;
    padding-bottom: 20px
}

.billApp .setting-con .detail ul li .con span {
    display: inline-block;
    width: 145px;
    margin-right: 5px;
    text-align: right
}

.billApp .setting-con .detail ul li .con .btn,
.billApp .setting-con .detail ul li .con .save {
    display: inline-block;
    vertical-align: middle;
    width: 94px;
    height: 32px;
    line-height: 32px;
    color: #5b6775;
    background-color: #ecf0f2;
    border-radius: 2px;
    text-align: center
}

.billApp .setting-con .detail ul li .con .btn:hover,
.billApp .setting-con .detail ul li .con .save:hover {
    background-color: #b9f1f9
}

.billApp .setting-con .detail ul li .con .btn.selected,
.billApp .setting-con .detail ul li .con .save.selected {
    color: #252f3d;
    background-color: #5cd0e0;
    cursor: default
}

.billApp .setting-con .detail ul li .con .save {
    background-color: #00afc8;
    color: #fff
}

.billApp .setting-con .detail ul li .con .save:hover {
    background-color: #00a5bd
}

.billApp .setting-con .detail ul li .con .save:active {
    background-color: #009bb1
}

.billApp .setting-con .detail ul li .con .save.disabled {
    color: #a8b3be;
    background-color: #d9e3e5;
    cursor: not-allowed
}

.billApp .setting-con .detail ul li .con .input-row {
    margin-bottom: 10px
}

.billApp .setting-con .detail ul li .con .input-row.last {
    margin-top: 30px
}

.billApp .setting-con .detail ul li .con .input-row input.error {
    border: 1px solid #e05c69;
    margin-left: 0;
    height: 32px;
    line-height: 22px;
    color: #252f3d
}

.billApp .setting-con .detail ul li .con .input-row i {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(/static/modules/apps/instance/i/icon-status.png) 0 0 no-repeat;
    background-size: 15px 90px;
    padding-right: 6px;
    vertical-align: middle
}

.billApp .setting-con .detail ul li .con .input-row .username-tip {
    width: auto;
    margin-left: 10px;
    color: #a8b3be;
    vertical-align: middle;
    text-align: left
}

.billApp .setting-con .detail ul li .con .input-row .pwd-tip {
    padding-left: 47px;
    padding-top: 24px;
    color: #a8b3be
}

.billApp .setting-con .detail ul li .con .input-row .success {
    margin-left: 162px;
    margin-right: 8px;
    height: 16px;
    line-height: 16px;
    color: #1eb9a5;
    font-size: 12px
}

.billApp .setting-con .detail ul li .con .input-row .success span {
    vertical-align: middle;
    width: auto
}

.billApp .setting-con .detail ul li .con .input-row.redirect {
    margin-left: 162px;
    color: #999
}

.billApp .setting-con .detail ul li .con .input-row.redirect>div:nth-child(2) {
    margin-top: 7px
}

.billApp .setting-con .detail ul li .con .input-row.redirect a {
    padding: 0 5px
}

.billApp .setting-con .detail ul li .con .input-row .error {
    margin-left: 162px;
    height: 16px;
    line-height: 16px;
    color: #f05858;
    font-size: 12px
}

.billApp .setting-con .detail ul li .con .input-row .error span {
    vertical-align: middle;
    width: auto
}

.billApp .setting-con .detail ul li .con .input-row .error i {
    background-position: 0 -45px
}

.billApp .setting-con .detail ul li .con label {
    width: 143px;
    height: 30px;
    line-height: 30px;
    padding-right: 15px;
    text-align: right
}

.billApp .setting-con .detail ul li .con input {
    width: 280px
}

.billApp .setting-con .detail ul li .con .download {
    margin-left: 35px
}

.billApp .setting-con .detail ul li .con .dl-wp {
    margin-right: 0;
    width: 143px
}

.billApp .overview-con {
    color: #323232;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.billApp .overview-con .row .num {
    margin-right: 10px
}

.billApp .overview-con .row .gray {
    color: #a8b3be
}

.billApp .overview-con .con {
    margin: 48px 48px 0 48px;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex
}

.billApp .overview-con .con:nth-child(1) {
    height: 156px;
    min-height: 156px;
    max-height: 156px
}

.billApp .overview-con .con:nth-child(2) {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 30px 20px 0 20px
}

.billApp .overview-con .con .table-header,
.billApp .overview-con .con .table {
    margin: 0
}

.billApp .overview-con .profile {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 400px;
    min-width: 400px;
    max-width: 400px
}

.billApp .overview-con .profile>div {
    float: left
}

.billApp .overview-con .profile>div:first-child {
    background: url(/static/public/img/gravatar_110.png) center 0 no-repeat;
    border-radius: 50%
}

.billApp .overview-con .profile>div:nth-child(2) {
    margin-left: 20px
}

.billApp .overview-con .profile .img {
    width: 110px;
    height: 110px;
    border-radius: 50%
}

.billApp .overview-con .profile .name {
    margin-bottom: 14px;
    font-size: 12px
}

.billApp .overview-con .profile .email {
    margin-bottom: 20px
}

.billApp .overview-con .profile .account {
    width: 250px;
    margin-bottom: 8px
}

.billApp .overview-con .profile .account>span:nth-child(1) {
    padding-right: 5px
}

.billApp .overview-con .profile .account>span.balance {
    font-size: 18px
}

.billApp .overview-con .profile .account .num {
    color: #1eb9a5
}

.billApp .overview-con .profile .account .price {
    color: #f78913
}

.billApp .overview-con .profile .separater {
    color: #97a0ad;
    padding: 0 16px;
    font-size: 14px
}

.billApp .overview-con .trend {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 532px;
    min-width: 532px;
    max-width: 532px;
    margin: auto;
    position: relative
}

.billApp .overview-con .trend .desc {
    height: 32px;
    line-height: 32px
}

.billApp .overview-con .trend .desc span:nth-child(1) {
    padding-right: 5px
}

.billApp .overview-con .trend .btn {
    position: absolute;
    right: 0px;
    top: 0px
}

.billApp .overview-con .trend .btn select {
    float: left;
    width: 150px;
    margin-right: 10px
}

.billApp .overview-con .trend .btn a {
    float: left;
    display: block;
    width: 50px;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: #738293;
    background-color: #ecf0f2;
    text-align: center;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px
}

.billApp .overview-con .trend .btn a:last-child {
    border-left: 1px solid #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px
}

.billApp .overview-con .trend .btn a:hover {
    background-color: #b9f1f9
}

.billApp .overview-con .trend .btn a.selected {
    color: #252f3d;
    background-color: #5cd0e0
}

.billApp .overview-con .trend .charts {
    position: relative;
    margin-top: 10px;
    width: 530px;
    height: 120px;
    cursor: pointer
}

.billApp .overview-con .trend .charts canvas {
    width: 530px;
    height: 120px
}

.billApp .overview-con .trend .charts .tip {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 145px;
    z-index: 99;
    background-color: #fff;
    border: 2px solid #c3ebf0;
    border-radius: 2px;
    padding: 5px 8px;
    cursor: default;
    overflow: hidden;
    -webkit-transition-duration: .25s;
    -moz-transition-duration: .25s;
    -o-transition-duration: .25s;
    transition-duration: .25s
}

.billApp .overview-con .trend .charts .tip>div:nth-child(1) {
    color: #787878
}

.billApp .overview-con .trend .charts .tip>div:nth-child(2) {
    margin-top: 4px;
    color: #f78913
}

.billApp .record-con {
    top: 0;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.billApp .record-con .table-header {
    margin-top: 5px
}

.billApp .record-con i {
    display: block;
    width: 24px;
    height: 24px;
    background: url(/static/modules/apps/bills/img/icon48@2x_v4.png) 0 0 no-repeat;
    background-size: 324px 49px
}

.billApp .record-con i.instance {
    background-position: -275px 0
}

.billApp .record-con i.router {
    background-position: -200px 0
}

.billApp .record-con i.volume {
    background-position: -50px 0
}

.billApp .record-con i.listener {
    background-position: -76px 0
}

.billApp .record-con i.image {
    background-position: -150px 0
}

.billApp .record-con i.floatingip {
    background-position: -100px 0
}

.billApp .record-con i.snapshot {
    background-position: -175px 0
}

.billApp .record-con i.vpn {
    background-position: 0 0
}

.billApp .record-con i.alarm {
    background-position: -300px 0
}

.billApp .record-con i.share {
    background-position: -250px 3px
}

.billApp .record-con .category {
    margin-left: 20px;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.billApp .record-con .no-order {
    margin-top: 20px;
    text-align: center;
    color: #a8b3be
}

.billApp .record-con .table .row .status i {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(/static/modules/apps/instance/i/icon-status.png) 0 0 no-repeat;
    background-size: 15px 90px
}

.billApp .record-con .table .row .status i.stopped {
    background-position: 0 -15px
}

.billApp .record-con .table .row .status i.suspended {
    background-position: 0 -30px
}

.billApp .record-con .table .row .status i.deleted {
    background-position: 0 -60px
}

.billApp .record-con .category {
    margin-top: 20px;
    margin-right: 20px;
    height: 124px;
    min-height: 124px;
    max-height: 124px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
}

.billApp .record-con .category .category-wp {
    position: relative;
    width: 100%;
    height: 124px;
    min-height: 124px;
    max-height: 124px;
    overflow: hidden;
    overflow-x: auto
}

.billApp .record-con .category ul {
    position: absolute;
    min-width: 1300px;
    width: 100%;
    border-top: 2px solid #e7ebed;
    border-bottom: 2px solid #e7ebed;
    z-index: 9
}

.billApp .record-con .category ul li {
    float: left;
    width: 129px;
    height: 104px;
    margin-right: 1px
}

.billApp .record-con .category ul li:first-child .desc {
    margin-top: 30px
}

.billApp .record-con .category ul li:first-child .fee {
    margin-top: 28px
}

.billApp .record-con .category ul li a {
    display: block;
    text-align: center;
    width: 129px;
    height: 104px;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 2px;
    color: #323232;
    font-size: 12px;
    overflow: hidden;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.billApp .record-con .category ul li a:hover,
.billApp .record-con .category ul li a.selected {
    border: 2px solid #82e1f5;
    background-color: #f5fdfe
}

.billApp .record-con .category ul li a:hover i.instance,
.billApp .record-con .category ul li a.selected i.instance {
    background-position: -275px -25px
}

.billApp .record-con .category ul li a:hover i.router,
.billApp .record-con .category ul li a.selected i.router {
    background-position: -200px -25px
}

.billApp .record-con .category ul li a:hover i.listener,
.billApp .record-con .category ul li a.selected i.listener {
    background-position: -76px -25px
}

.billApp .record-con .category ul li a:hover i.volume,
.billApp .record-con .category ul li a.selected i.volume {
    background-position: -50px -25px
}

.billApp .record-con .category ul li a:hover i.image,
.billApp .record-con .category ul li a.selected i.image {
    background-position: -150px -25px
}

.billApp .record-con .category ul li a:hover i.floatingip,
.billApp .record-con .category ul li a.selected i.floatingip {
    background-position: -100px -25px
}

.billApp .record-con .category ul li a:hover i.snapshot,
.billApp .record-con .category ul li a.selected i.snapshot {
    background-position: -175px -25px
}

.billApp .record-con .category ul li a:hover i.vpn,
.billApp .record-con .category ul li a.selected i.vpn {
    background-position: 0 -25px
}

.billApp .record-con .category ul li a:hover i.alarm,
.billApp .record-con .category ul li a.selected i.alarm {
    background-position: -300px -25px
}

.billApp .record-con .category ul li a:hover i.share,
.billApp .record-con .category ul li a.selected i.share {
    background-position: -250px -22px
}

.billApp .record-con .category ul li a i {
    margin: 16px 0 0 50px
}

.billApp .record-con .category ul li a .desc {
    margin-top: 8px
}

.billApp .record-con .category ul li a .desc span:nth-child(2) {
    padding-left: 5px;
    color: #527583
}

.billApp .record-con .category ul li a .fee {
    margin-top: 10px
}

.billApp .record-con .category ul li a .fee span.price {
    font-size: 14px;
    color: #f78913;
    font-weight: bold
}

.billApp .order-detail {
    position: absolute;
    top: 201px;
    left: 200px;
    right: 0px;
    bottom: -10px;
    border-left: 1px solid #c1cdcf;
    background-color: #fff;
    transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transition: transform 500ms;
    -webkit-transition: -webkit-transform 500ms;
    z-index: 2;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.billApp .order-detail.visible {
    transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0)
}

.billApp .order-detail .tab {
    padding: 7px 0 0 70px
}

.billApp .order-detail .tab a {
    display: inline-block;
    padding: 0 16px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    color: #252f3d;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    cursor: default
}

.billApp .order-detail .table-header {
    margin-top: 10px
}

.billApp .order-detail .header {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    background-color: #ecf0f2
}

.billApp .order-detail .header .close {
    display: block;
    color: #919191;
    font-size: 14px;
    position: absolute;
    padding: 5px;
    margin: 7px 0 0 15px;
    z-index: 2;
    font-family: 'placeboIcon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.billApp .order-detail .header .close:before {
    content: "\e612"
}

.billApp .order-detail .header .close:hover {
    color: #00a5c1
}

.billApp .charge-con {
    top: 0;
    padding: 0 20px;
    font-size: 12px
}

.billApp .charge-con .tip {
    margin-top: 20px
}

.billApp .charge-con .tip .t-receipt,
.billApp .charge-con .tip .t-quota {
    margin-bottom: 10px;
    padding: 7px 12px;
    line-height: 20px;
    border: 1px solid #51c4d4;
    border-radius: 2px;
    background-color: #e5f7fa;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis
}

.billApp .charge-con .tip .t-quota {
    border: 1px solid #d2004a;
    background-color: #fce5e6
}

.billApp .charge-con .balance {
    padding: 0 0 8px 0;
    border-bottom: 1px solid #e7ebed
}

.billApp .charge-con .balance span.price {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 18px;
    font-weight: bold;
    color: #1eb9a5
}

.billApp .charge-con .balance span:first-child {
    padding-right: 15px
}

.billApp .charge-con .form-wrapper {
    padding-top: 20px;
    padding-bottom: 20px
}

.billApp .charge-con .form-wrapper form {
    margin-bottom: 0
}

.billApp .charge-con .form-wrapper .m {
    height: 32px;
    overflow: hidden;
    line-height: 32px
}

.billApp .charge-con .form-wrapper .m label {
    float: left;
    width: 65px
}

.billApp .charge-con .form-wrapper .m input {
    float: left;
    width: 194px
}

.billApp .charge-con .form-wrapper .m input.error {
    border-color: #d2004a
}

.billApp .charge-con .form-wrapper .m span {
    float: left;
    padding-left: 35px;
    color: #a8b3be
}

.billApp .charge-con .form-wrapper .more {
    margin: 25px 0 26px;
    width: 955px;
    text-align: right
}

.billApp .charge-con .form-wrapper .more a i {
    display: inline-block;
    margin-left: 6px;
    width: 14px;
    height: 7px;
    background: url(/static/modules/apps/bills/img/arrow.png) 0 0 no-repeat
}

.billApp .charge-con .form-wrapper .more a:hover i {
    background-position: 0 bottom
}

.billApp .charge-con .form-wrapper .more .expand i {
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.billApp .charge-con .form-wrapper .p {
    margin-top: 20px
}

.billApp .charge-con .form-wrapper .p .p-l {
    float: left;
    width: 65px
}

.billApp .charge-con .form-wrapper .p .p-l label {
    height: 40px;
    line-height: 40px
}

.billApp .charge-con .form-wrapper .p .p-r {
    float: left
}

.billApp .charge-con .form-wrapper .p .p-r label {
    margin-left: 10px;
    height: 40px
}

.billApp .charge-con .form-wrapper .p .p-r i {
    display: inline-block;
    width: 163px;
    height: 40px;
    background: url(/static/modules/apps/bills/img/bank_logo.png) 0 0 no-repeat;
    border: 1px solid #e2e7ea;
    border-radius: 2px
}

.billApp .charge-con .form-wrapper .p .p-r i.alipay {
    background-position: 0 0
}

.billApp .charge-con .form-wrapper .p .p-r i.bocb2c {
    background-position: 0 -51px
}

.billApp .charge-con .form-wrapper .p .p-r i.icbcb2c {
    background-position: 0 -101px
}

.billApp .charge-con .form-wrapper .p .p-r i.cmb {
    background-position: 0 -151px
}

.billApp .charge-con .form-wrapper .p .p-r i.ccb {
    background-position: 0 -201px
}

.billApp .charge-con .form-wrapper .p .p-r i.abc {
    background-position: 0 -251px
}

.billApp .charge-con .form-wrapper .p .p-r i.spdb {
    background-position: 0 -301px
}

.billApp .charge-con .form-wrapper .p .p-r i.cib {
    background-position: 0 -351px
}

.billApp .charge-con .form-wrapper .p .p-r i.gdb {
    background-position: 0 -401px
}

.billApp .charge-con .form-wrapper .p .p-r i.cmbc {
    background-position: 0 -451px
}

.billApp .charge-con .form-wrapper .p .p-r i.citic {
    background-position: 0 -501px
}

.billApp .charge-con .form-wrapper .p .p-r i.hzcbb2c {
    background-position: 0 -551px
}

.billApp .charge-con .form-wrapper .p .p-r i.cebbank {
    background-position: 0 -601px
}

.billApp .charge-con .form-wrapper .p .p-r i.shbank {
    background-position: 0 -651px
}

.billApp .charge-con .form-wrapper .p .p-r i.nbbank {
    background-position: 0 -701px
}

.billApp .charge-con .form-wrapper .p .p-r i.spabank {
    background-position: 0 -751px
}

.billApp .charge-con .form-wrapper .p .p-r i.bjrcb {
    background-position: 0 -801px
}

.billApp .charge-con .form-wrapper .p .p-r i.fdb {
    background-position: 0 -851px
}

.billApp .charge-con .form-wrapper .p .p-r i.postgc {
    background-position: 0 -901px
}

.billApp .charge-con .form-wrapper .p.category {
    margin-top: 12px
}

.billApp .charge-con .form-wrapper .p.category .p-r {
    margin-left: 38px
}

.billApp .charge-con .form-wrapper .p.category .p-r:first-child {
    margin-left: 65px
}

.billApp .charge-con .form-wrapper .s {
    border-top: 1px solid #e7ebed;
    padding-top: 20px
}

.billApp .charge-con .form-wrapper .s input {
    min-width: 86px;
    padding: 0 12px;
    height: 32px;
    line-height: 32px;
    border: none;
    font-size: 13px;
    background-color: #00afc8;
    -webkit-appearance: none;
    border-radius: 2px;
    color: #fff
}

.billApp .charge-con .form-wrapper .s input:hover {
    background-color: #00a5bd
}

.billApp .charge-con .form-wrapper .s input:active {
    background-color: #009bb1
}

.billApp .charge-con .card {
    padding-top: 20px;
    padding-bottom: 20px
}

.billApp .charge-con .card .card-num {
    height: 172px
}

.billApp .charge-con .card .card-num .error {
    border: 1px solid #e05c69
}

.billApp .charge-con .card .card-num>span:first-child {
    display: inline-block;
    width: 90px
}

.billApp .charge-con .card .card-num .card-tip {
    margin-top: 10px;
    padding-left: 90px;
    color: #d2004a;
    height: 34px;
    overflow: hidden;
    line-height: 34px;
    font-size: 12px;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis
}

.billApp .charge-con .card input {
    width: 56px
}

.billApp .charge-con .card .btn-wp {
    padding-top: 20px;
    border-top: 1px solid #e7ebed
}

.billApp .charge-con .card .btn-wp input {
    min-width: 86px;
    padding: 0 12px;
    height: 32px;
    line-height: 32px;
    border: none;
    font-size: 13px;
    width: auto;
    background-color: #00afc8;
    -webkit-appearance: none;
    border-radius: 2px;
    color: #fff
}

.billApp .charge-con .card .btn-wp input:hover {
    background-color: #00a5bd
}

.billApp .charge-con .card .btn-wp input:active {
    background-color: #009bb1
}

.billApp .charge-con .transfer {
    padding-top: 20px
}

.billApp .charge-con .transfer table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}

.billApp .charge-con .transfer thead {
    height: 36px
}

.billApp .charge-con .transfer thead tr {
    height: 36px;
    background-color: #ecf0f2;
    color: #626f7e
}

.billApp .charge-con .transfer thead tr td {
    padding-left: 16px;
    border-right: 1px solid #fff
}

.billApp .charge-con .transfer tbody tr {
    height: 40px
}

.billApp .charge-con .transfer tbody tr td {
    border-bottom: 1px solid #d2d9da;
    padding-left: 16px
}

.billApp .charge-con .transfer .tip {
    margin-top: 40px;
    padding: 5px 12px;
    font-size: 12px;
    background-color: #fff7ea;
    border: 1px solid #ffcd7e;
    line-height: 20px
}

.billApp .charge-con .transfer .tip strong {
    color: #ffac2a;
    font-weight: normal
}

.billApp .charge-con .btn {
    display: inline-block;
    min-width: 80px;
    border: none;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 12px;
    font-size: 13px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffffff;
    background-color: #00afc8;
    border-color: #00afc8;
    -webkit-appearance: none
}

.billApp .charge-con .btn:hover {
    color: #ffffff;
    background-color: #00a5bd;
    border-color: #00a5bd
}

.billApp .charge-con .btn:active {
    color: #ffffff;
    background-color: #009bb1
}

.billApp .charge-con .btn-status {
    color: #738293;
    background-color: #ecf0f2;
    border-color: #ecf0f2
}

.billApp .charge-con .btn-status:hover {
    color: #738293;
    background-color: #b9f1f9;
    border-color: #b9f1f9
}

.billApp .charge-con .btn-status:active {
    color: #738293;
    background-color: #b9f1f9
}

.billApp .charge-con .btn-status.selected {
    color: #252f3d;
    background-color: #5cd0e0;
    border-color: #5cd0e0
}

.billApp .charge-con .btn-group {
    display: inline-block;
    margin-top: 20px
}

.billApp .charge-con .btn-group>.btn {
    float: left;
    margin-right: 1px
}

.billApp .charge-con .btn-group>.btn:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.billApp .charge-con .btn-group>.btn:last-child {
    margin-right: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0
}

.billApp .charge-con .btn-group>.btn:not(:first-child):not(:last-child) {
    border-radius: 0
}

.billApp .account-record-con {
    top: 0;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.billApp .account-record-con .gross {
    float: left
}

.billApp .account-record-con .gross span:first-child {
    font-size: 12px;
    font-weight: bold;
    color: #1eb9a5
}

.billApp .account-record-con .gross span:last-child {
    padding-left: 10px
}

.billApp .project-con {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.billApp .project-con .row .num {
    margin-right: 10px
}

.billApp .project-con .row .gray {
    color: #a8b3be
}

.vmModal .modelBody .t-charge {
    margin-bottom: 10px;
    padding: 7px 12px;
    line-height: 20px;
    border: 1px solid #00afc8;
    border-radius: 2px;
    color: #323232;
    background-color: #e5f7fa
}

.vmModal .modelBody .t-charge strong {
    color: #ffac2a
}

.invoice .warnTip,
.invoice-info .warnTip {
    margin-bottom: 10px;
    padding: 7px 12px;
    line-height: 20px;
    border: 1px solid #d2004a;
    border-radius: 2px;
    background-color: #fce5e6;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis
}

.invoice .buttonBar .warnTip,
.invoice-info .buttonBar .warnTip {
    display: inline
}

.instanceApp .vmPage {
    position: relative
}

.instanceApp .vmPage .detailView {
    height: auto!important;
    position: absolute;
    right: 0;
    left: 200px;
    top: 56px;
    bottom: 0;
    border-left: 1px solid #d7d7d7;
    background-color: #fff;
    z-index: 2;
    transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0)
}

.instanceApp .vmPage .detailView .closeDetail {
    display: block;
    color: #919191;
    font-size: 14px;
    position: absolute;
    padding: 5px;
    margin: 7px 0 0 15px;
    z-index: 2;
    font-family: 'placeboIcon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.instanceApp .vmPage .detailView .closeDetail:before {
    content: "\e612"
}

.instanceApp .vmPage .detailView .closeDetail:hover {
    color: #00a5c1
}

.instanceApp .vmPage .detailView .closeDetail:active {
    color: #019cb4
}

.instanceApp .vmPage .detailView .vdivider {
    display: none
}

.instanceApp .vmPage .detailView .tabs {
    height: 36px;
    background-color: #ecf0f2;
    padding-left: 70px;
    color: #738293
}

.instanceApp .vmPage .detailView .tabs .tab {
    margin-top: 6px;
    padding: 0 16px;
    height: 30px;
    line-height: 30px;
    border-right: none;
    background-color: transparent;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px
}

.instanceApp .vmPage .detailView .tabs .tab:hover {
    background-color: #b9f1f9
}

.instanceApp .vmPage .detailView .tabs .tab.selected {
    color: #252f3d;
    background-color: #fff
}

.instanceApp .vmPage .detailView .tabs .tab.selected:before {
    display: none
}

.instanceApp .vmPage .detailView .tabPanels {
    top: 36px
}

.instanceApp .vmPage .detailView .tabPanels .panel {
    display: block!important;
    padding: 20px 20px 12px;
    overflow: auto
}

.instanceApp .vmPage .detailView .tabPanels .panel>div {
    display: block;
    padding: 0 0 24px 0!important
}

.instanceApp .vmPage .detailView .tabPanels .panel.hide {
    display: none!important
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorPanel {
    overflow: visible
}

.instanceApp .vmPage .detailView .tabPanels .panel[field="monitor"] .monitorPanel .monitorContainer {
    position: static;
    overflow: hidden
}

.instanceApp .vmPage .detailView.visible {
    transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transition: transform 500ms;
    -webkit-transition: -webkit-transform 500ms
}

.instanceApp .vmPage .detailView.invisible {
    transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transition: transform 500ms;
    -webkit-transition: -webkit-transform 500ms
}
